webpack总结
webpack安装
- 全局安装:npm install -g webpack
- 安装到项目目录:npm install -save-dev webpack
基本使用方法
- webpack {entry file} {destination for bundled file} // 其中entry file是指入口文件的路径,destination for bundled file是打包文件的存放路径
- ⚠️如果是非全局安装,用:node_modules/.bin/webpack {entry file} {destination for bundled file}
通过配置文件使用
- 通过在webpack.config.js中配置打包相关代码,使用webpack命令打包时会自动引用webpack.config.js文件中的配置选项
- 配置示例如下:
module.exports = { entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件 output: { path: __dirname + "/public",//打包后的文件存放的地方 filename: "bundle.js"//打包后输出文件的文件名 } } // 这样,在打包时,只需使用 webpack(全局时,非全局用node_modules/.bin/webpack) 即可
更快捷地执行打包任务
- 在package.json中对scripts对象中进行设置,例如:
"scripts": { "start": "webpack" // 修改的是这里,JSON文件不支持注释,引用时请清除 }, // 只需要使用npm start即可(npm的start命令是一个特殊的脚本名称,和install一样,不需要加run)
- ⚠️package.json中的script会安装一定顺序寻找命令对应位置,本地的node_modules/.bin路径就在这个寻找清单中,所以无论是全局还是局部安装的Webpack,所以不需要写前面那指明详细的路径了。
在实际中的使用
- 一般,我们会把webpack.config.js变成两个文件。比如,在开发时,我们不需要代码优化,所以不需要webpack.optimize plugins,在选择协助debuge的工具时(在配置文件中有选项:devtool),source-map用于prodution,cheap-eval-source-map用于development。
webpack.config.dev.js // 用于开发过程webpack.config.prod.js // 用于实际生产
- 这样,执行dev server的命令:
$ webpack-dev-server —config webpack.config.dev.js (可以安装webpack-dev-server,跑起一个服务)
- 执行build production的命令:
$ webpack —config webpack.config.prod.js