webpack实例教程(四)webpack4.0出来了

webpack实例教程(一) 安装和查看
webpack实例教程(二) hot Uglify
webpack实例教程(三) loader
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')
    }
};

这样就好啦!
继续研究,有啥重点继续更新!!!

你可能感兴趣的:(webpack实例教程(四)webpack4.0出来了)