初步了解webpack（一）

　　用webpack搭建项目，首先npm init初始化项目，然后全局安装webpack（npm install webpack -g），再在项目上本地安装webpack（npm install webpack -D），在这里要注意，--save(-S)是安装代码依赖，开发依赖，比如上线以后还用到的插件等，--dev-save(-D)是安装开发依赖，比如gulp，webpack这一类构建工具，只是在开发阶段用到编译。

　　此时webpack版本为4.17.1，在用webpack编译自己写好的js（webpack ./src/index.js ./dist/dist.js）的时候报错：　

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in multi ./src/index.js ./dist/dist.js
Module not found: Error: Can't resolve './dist/dist.js' in 'D:\project\my-webpackDemo'
 @ multi ./src/index.js ./dist/dist.js main[1]

　　百度了一下，有一个答案说是：默认的打包模式为production生产环境模式，所以为了减少文件体积，压缩成了一行。要将mode变为development开发环境。也就是加上--mode development即可。webpack4.0以上需要写 --output-filename和--output-path。据此修改了一下，webpack --mode development ./src/index.js -o ./dist/dist.js（webpack --mode production src/index.js --output-filename dist.js --output-path dist），这样写就可以了。如果每次改一点内容都要这样编译一次未免太麻烦了，可以创建一个webpack.config.js文件，在里面写好基本的webpack配置。配置好以后，只需要在终端输入webpack就可以了。

// webpack的配置文件
// webpack怎么编译代码 在这个文件中配置

//配置对象
module.exports = {
    //需要编译的入口文件
    entry: './src/index.js',
    //输出文件
    output: {
        path: __dirname,//这个是一个全局变量，即这个项目所在的路径
        filename: 'dist/pro.js'
    }

}

　　webpack服务，webpack-dev-server：

　　首先全局安装npm install webpack-dev-server -g，然后再在项目本地安装npm install webpack-dev-server -D,还要全局安装webpack-cli,再局部安装webpack-cli，此时再运行webpack-dev-server，就搭建好了本地服务器。默认为http://localhost:8080,在浏览器上打开这个地址就可以看到。这时候修改文件，webpack也会自动编译。但是如果ctrl+C退出了，本地服务器也就关闭了，也就不再自动编译了。执行webpack-dev-server 在src文件夹执行对项目执行开发，服务器就会进行编译，将代码部署在服务器上。webpack-dev-server --port 8000 修改默认端口号。webpack-dev-server --open 打开浏览器。webpack-dev-server --progress显示编译进度。同理，服务可以在packge.json文件里面配置。

{
  "name": "day1113",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open --progress --port 3000",//开发环境用本地服务器
    "build": "webpack --progress -p"//上线环境用压缩过后的代码
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}

　　这样配置以后，以后就只用运行npm run dev就可以了，上线就是运行npm run build。

　　更详细可以在这里学习。