参考的文章 :https://blog.csdn.net/u012443286/article/details/79504289
为了避免出现不必要的麻烦,在使用webpack 的时候要全局安装
--display-error-details 显示异常信息
--watch 是可以一直监听 有变化就重新打包
-p 压缩混淆脚本,这个非常非常重要!
-d 生成map映射文件,告知哪些模块被最终打包到哪里了
1 npm install -g webpack
2 npm install -g webpack-cli
3 新建入口文件默认 src/index.js
4 新建出口文件默认dist/main.js
5 在package-json 配置
“dev”: " webpack --mode development ", // 后面可以加 --watch
"build":" webpack --mode production "
以后直接运行 npm run dev / npm run build 就可以了
如果是低于版本四 应该配一下 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 :格式转化 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