webpack入门

前言

什么是webpack

webpack 可以看作时模块打包机：它通过分析你的项目结构，找到 JavaScript 模块以及其他的一些浏览器不能运行的拓展语言，如 Scss, typescript 等等，将其转换和打包为合适的格式供浏览器使用。

为什么要用webpack

• 模块化，让我们可以把复杂的程序细化为小的文件。
• 使浏览器能够运行类似 typescript 的拓展语言。
• Scss, less 等 CSS 预处理器。
• …

配置文件 webpack.config.js

module.exports = {
    entry: __dirname + "/app/main.js", // 入口文件
    output: {
        path: __dirname + "/public", // 打包后文件存放的地方
        filename: "bundle.js" // 打包后输出的文件名
    }
}

__dirname 是node.js的一个全局变量，指向当前脚本所在的目录。

在package.json中配置命令

{
  "name": "webpack-project",
  "version": "1.0.0",
  "description": "Sample webpack project",
  "scripts": {
    "start": "webpack" 
  },
  "author": "RainRx",
  "license": "ISC",
  "devDependencies": {
    "webpack": "3.10.0"
  }
}

npm的start命令是一个特殊的脚本名称，其特殊性表现在，在命令行中使用npm start就可以执行其对于的命令，如果对应的此脚本名称不是start，想要在命令行中运行时，需要这样用npm run {script name}如npm run build

生成Source Map

Source Map可以帮助开发者找到出错地方对应的代码。

通过devtool进行配置

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

devtool选项	配置结果
source-map	在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度；
cheap-module-source-map	在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便
eval-source-map	使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项；
cheap-module-eval-source-map	这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点；

上述选项从上到下打包速度越来越快。

在开发环境使用：cheap-module-eval-source-map
在生产环境使用：cheap-module-source-map

使用webpack构建本地服务器

devserver配置选项:

module.exports = {
  devtool: 'eval-source-map',

  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },

  devServer: {
    contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true,//实时刷新
    port:8080 // 端口 默认为8080
  } 
}

loader

通过loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件。

loaders的配置包括以下几个方面：

• test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
• loader：loader的名称（必须）
• include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
• options：为loaders提供额外的设置选项（可选）

module:{
    rules:[{
        test:/\.js$/,
        use:[{
            loader:'babel-loader',
            options:{
                presets:['react']
            }
        }]
    }]
}