--------------------------------------------安装环境--------------------------------------------------------------- npm install -g webpack //全局安装webpack
npm init //初始化package.json ,如果不是在npm中发布模块,可以still enter
npm install --save-dev webpack //在当前项目目录中安装webpack作为依赖包
---------------------------------------------webpack打包-----------------------------------------------------------
webpack {入口js文件的路径} {打包后的文件路径} //填写路径的时候不用添加{}
node_modules/.bin/webpack {入口js文件的路径} {打包后的文件路径} //webpack没有全局安装的情况下
----------------------使用配置文件代替路径----------------------
1.直接输入webpack 命令即可 在根目录下创建webpack.config.js文件
注:“__dirname”是node.js中的一个全局变量,它指向当前执行脚本所在的目录。
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"//打包后输出文件的文件名
}
}
2.使用npm start命令 在根目录的package.json中添加以下节点 "scripts": { "start": "webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除 },
---------------------------------------------调试-------------------------------
devtool: 'eval-source-map' //可选项有source-map,cheap-module-source-map,eval-source-map, cheap-module-eval-source-map,依次打包速度越来越快,带上会带来负面的安全影响等,所有建议开发过程中使用,发布的时候去掉该配置
----------------------------------热更改-------------------------------
webpack可以提供一个可选的本地开发服务器,是用node.js构建的,可以实时监听目录的代码更改,但是这是一个单独的组件,需要单独安装
npm install --save-dev webpack-dev-serve
devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 port:8080,//端口,可省略,默认8080 inline: true//实时刷新 }
在npm的配置文件中的scripts中配置也可快速启动该服务器 "scripts": { "serve": "webpack-dev-server --open" // 修改的是这里,JSON文件不支持注释,引用时请清除 },