webpack总结

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

​