npm init -y //初始化生成 package.json 文件
npm i webpack --save-dev //安装 webpack
npm install webpack webpack-cli --save-dev //安装 webpack-cli
"private": true, //调整 package.json 文件,以便确保我们安装包是私有的(private)
npm install --save lodash //打包 lodash 依赖
npx webpack .\src\main.js --output-filename bundle.js --output-path .\dist\ --mode development //输入main.js文件,输出bundle.js文件,输出路径dist目录下
或者
npx webpack ./src/main.js -o ./dist/bundle.js //效果基本与上面相同
由于每次修改 js 文件都要重新输入一次路径太麻烦了,此时想使用 npx webpack 来进行打包,但是会报以下错误:
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
解决方法:使用一个配置文件
webpack.config.js:
const path = require('path');
//这个配置文件,起始是一个JS文件,通过Node中的模块操作,向外暴露了一个配置对象
module.exports = {
entry: './src/main.js', //入口,表示要使用webpack打包哪个文件
output: {
filename: 'bundle.js', //这里是输出文件的名称
path: path.resolve(__dirname, 'dist') //指定打包好的文件输出到了那个目录中去
}
};
再次运行 npx webpack 即可
由于经常使用,不想手动刷新页面(就是想偷懒而已)我们可以在 package.json 添加一个 npm 脚本 ==> "dev":
package.json:
cnpm install webpack-dev-server //安装webpack-dev-server
此时,会有一个 http://localhost:8080/ 打开,找到里面的 index.html (我这里是src)
终端运行 npm run dev 即可(此时,每次修改js文件后查看效果,都只需运行npm run dev ,就会自动刷新页面)
最后,我们给 webpack-dev-server 添加参数
package.json:
--open : 自动打开默认浏览器
--port XXX: 修改端口号为 XXX
--contentBase XXX: 不再需要手动寻找主页面(我这里主页面在src下)
--hot: 热更新,就是只更新修改的部分
运行 npm run dev 完美完成