第十一篇 webpack

打包

• 静态资源打包器，把多个文件打包成一个文件，去除多余的文件和代码
• 每个js文件必须采用模块化写法，请观察控制台，在a中调用b
• webpack会在内部从entry入口根据依赖关系递归的构建一个依赖图，这个依赖图包含了应用程序所有需要的每个模块。

用webpack打包

• 步骤：
  • 安装NodeJs，然后再安装webpack和webpack-cli（在3.x之前只需安装前者）
  • 打包配置文件webpack.config.js需要放在项目根目录下，跟node_modules平级，里面存放配置信息
  • 配置好后在根目录下直接运行webpack即可
• 发现需要webpack安装成全局，再把这两者都安装成本地的才能运行，不知原因
• 配置的output中文件名后缀加不加.js生成的代码不一样！路径中__dirname代表当前路径

webpack核心概念

入口(entry)

• 从哪个文件开始构建依赖图
• 依赖图可以有1个或多个

输出(output)

• 指定打包后文件的输出位置，默认是./dist
• 可以分别指定路径和名称

      output: { 
          filename: '[name][hash:5].js', // 入口文件的定义名称和打包哈希的前5位
          path: __dirname + '/dist' // 当前目录下的/dist目录
      }

loader

• css‐loader解析css文件，style-loader将解析后的css样式加入到页面
• 上述两个loader的顺序是先 'style‐loader' 后 'css‐loader'，因为 webpack 对 loader 的处理是自下而上的
• loader的两个属性test和use，如 {test: /\.txt$/, use: 'raw‐loader' } 表示在webpack打包前将解析得到后缀为.txt的模块全部用raw-loader处理一下

插件(plugins)

• 实现一些loader无法完成的事情
• 如果打包时出现 Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin' 错误，那么需要先执行 npm install webpack安装Webpack到本地

模式(mode，4.0新增)

• 指定一个打包模式，目前支持的模式有 development（开发模式）和 production（生产模式）