webpack实例教程（四）webpack4.0出来了

这次还准备按照以前的方法使用webpack，but各种报错，都是原来你没见过的，还好提示的很明显，webpack-cli从webpack包里面分离出来了，所以需要自己安装啦！具体报错是这样的：

$ npx webpack src/index.js --output dist/bundle.js
npx: 1 安装成功，用时 26.36 秒
Path must be a string. Received undefined
C:\Users\Administrator\Desktop\webpack\webpack02\node_modules\webpack\bin\webpack.js
The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D

所以需要根据它的提示安装一个webpack-cli
npm install webpack-cli -D
上面还提示我没有找到webpack.js，我明明就安装过了，不知道到底为啥，所以一激动就把webpack卸掉了，就像这样：
npm uninstall webpack
然后在安装了一次
npm i -D webpack
再执行
npx webpack --config webpack.config.js
或者在package.json文件中添加

"scripts": {
    "build": "webpack"
  },

执行npm run build
然后就可以了
不得不说的是还有一个警告，虽然目前没有太大的影响，但是看着不舒服，这也是webpack4.0新增加的，警告如下：

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

这个主要是因为你mode这个属性，mode选项可以在webpack.config.js里指定，也可以在webpack cli命令上指定：
配置文件：
mode: 'development'
mode: 'production'

命令行：
webpack --mode development
webpack --mode production

development：开发模式，webpack会默认配置常用于开发的参数，如输出运行时的错误信息等
production：产品模式，webpack会默认配置常用语产品构建的餐宿，如压缩代码等

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
};

这样就好啦！
继续研究，有啥重点继续更新！！！