參考的文章? :https://blog.csdn.net/u012443286/article/details/79504289
為了避免出現(xiàn)不必要的麻煩齿拂,在使用webpack 的時(shí)候要全局安裝
?--display-error-details? ? 顯示異常信息
--watch? 是可以一直監(jiān)聽? 有變化就重新打包
-p?? ?壓縮混淆腳本,這個(gè)非常非常重要!
-d? ? 生成map映射文件衷模,告知哪些模塊被最終打包到哪里了
1? npm install -g webpack
2? npm install -g webpack-cli
3? 新建入口文件默認(rèn)? src/index.js?
4? 新建出口文件默認(rèn)dist/main.js
5? 在package-json? 配置
“dev”: " webpack --mode development ",? ? ? ? ? ? // 后面可以加 --watch
"build":" webpack --mode production "
以后直接運(yùn)行? npm run dev /? npm run build? 就可以了
如果是低于版本四? 應(yīng)該配一下 webpack.config.js
首先? webpack.config.js? 文件
在里面加入
module.exports = {
? ? ? ?entry: ————dirname + "/src/index.js"? ? //這里是入口文件
? ? ? ?output:{
? ? ? ? ? ? ? ? ? path:__dirname + '/dist')? ?//輸出目錄
? ? ? ? ? ? ? ? ? filename: 'bundle.js' 漫谷,? ? ?//輸出文件
? ? ? ? }
}
在package.json 中
更改main? :webpack.config.js? 就可以了
script? 中 加入? "start":"webpack"
plugin? :?https://www.npmjs.com/package/html-webpack-plugin
css-loader :格式轉(zhuǎn)化? ?https://www.npmjs.com/package/css-loader? ? 還需裝style-loader
style-loader:?https://www.npmjs.com/package/style-loader
sass loader:?https://www.npmjs.com/package/sass-loader