webpack学习1

安装

• 本地安装

npm install --save-dev webpack
npm install --save-dev webpack@<version>

对于大多数的项目，建议本地安装，这可以让我们更容易分别升级项目。

• 全局安装

npm install --global webpack

• 安装最新版

npm install webpack@beta
npm install webpack/webpack#<tagname/branchname>

最新版可能存在bug ，不应该在生产环境中使用。

起步

基本安装

创建一个项目，初始化 npm

mkdir webpack-demo && cd webpack-demo
npm init -y
npm install --save-dev webpack

创建一个 bundle 文件

要在 index.js 文件中打包 lodash 依赖，我们需要在本地安装 library

npm install --save lodash

执行 webpack，会将我们的脚本作为入口起点，然后输出为 bundle.js

./node_modules/.bin/webpack src/index.js dist/bundle.js

使用配置文件

新建 webpack.config.js 文件

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

重新构建

./node_modules/.bin/webpack --config webpack.config.js

使用 NPM 脚本

在 package.json 文件中添加 npm 脚本

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

可以使用 npm run build 命令，来替代我们之前用到的较长命令。

使用 npm 的 scripts，我们可以通过模块名，来引用本地安装的 npm 包，而不是写出完整路径。这是大多数基于 npm 的项目遵循的标准，允许我们直接调用 webpack，而不是去调用 ./node_modules/.bin/webpack。

管理资源

加载CSS

让js模块中加载css 文件，需要在module 配置中安装并添加 style-loader和 css-loader

npm install --save-dev style-loader css-loader

webpack.config.js

  const path = require('path');

  module.exports = {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    },
+   module: {
+     rules: [
+       {
+         test: /\.css$/,
+         use: [
+           'style-loader',
+           'css-loader'
+         ]
+       }
+     ]
+   }
  };

管理输出

设定HtmlWebpackPlugin

• 安装插件

npm install --save-dev html-webpack-plugin

• 修改webpack.config.js

  const path = require('path');
+ const HtmlWebpackPlugin = require('html-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   plugins: [
+     new HtmlWebpackPlugin({
+       title: 'Output Management'
+     })
+   ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

在我们构建之前，虽然在 dist/ 文件夹我们已经有 index.html 这个文件，然而 HtmlWebpackPlugin 还是会默认生成 index.html 文件。这就是说，它会用新生成的 index.html 文件，把我们的原来的替换。如果你在代码编辑器中 index.html 打开，你就会看到 HtmlWebpackPlugin 创建了一个全新的文件，所有的 bundle 会自动添加到 html 中。

清理 /dist 文件夹

通常，在每次构建前清理 /dist 文件夹，是比较推荐的做法，因此只会生成用到的文件。

npm install clean-webpack-plugin --save-dev

webpack.config.js

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    plugins: [
+     new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Output Management'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

开发

使用 source map

为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

webpack.config.js

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
+   devtool: 'inline-source-map',
    plugins: [
      new CleanWebpackPlugin(['dist']),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

选择一个开发工具

每次要编译代码时，手动运行 npm run build 就会变得很麻烦。

webpack 中有几个不同的选项，可以帮助你在代码发生变化后自动编译代码：

• webpack’s Watch Mode
• webpack-dev-server
• webpack-dev-middleware

多数场景中，你可能需要使用 webpack-dev-server

使用观察模式

添加一个用于启动 webpack 的观察模式的 npm script 脚本

package.json

  {
    "name": "development",
    "version": "1.0.0",
    "description": "",
    "main": "webpack.config.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
+     "watch": "webpack --watch",
      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "css-loader": "^0.28.4",
      "csv-loader": "^2.1.1"
    }
  }