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
所以需要根據(jù)它的提示安裝一個webpack-cli
npm install webpack-cli -D
上面還提示我沒有找到webpack.js娘扩,我明明就安裝過了,不知道到底為啥粤策,所以一激動就把webpack卸掉了樟澜,就像這樣:
npm uninstall webpack
然后在安裝了一次
npm i -D webpack
再執(zhí)行
npx webpack --config webpack.config.js
或者在package.json文件中添加
"scripts": {
"build": "webpack"
},
執(zhí)行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:開發(fā)模式,webpack會默認配置常用于開發(fā)的參數(shù)愈魏,如輸出運行時的錯誤信息等
production:產(chǎn)品模式觅玻,webpack會默認配置常用語產(chǎn)品構(gòu)建的餐宿,如壓縮代碼等
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
這樣就好啦培漏!
繼續(xù)研究溪厘,有啥重點繼續(xù)更新!E票畸悬!