webpack打包工具的安装、使用及其基本设置

安装

在使用webpack前，得确保安装了node.js，并且最好是最新的长期支持版本。
安装webpack可选择本地或者全局安装，官方文档中建议使用本地安装：这样可以在引入突破式变更(breaking change)版本时，更容易分别升级项目。

npm install --save-dev webpack //本地安装
npm install --global webpack //全局安装

另外在使用webpack v4+的版本时，还需要安装webpack-cli：

npm install --save-dev webpack-cli

起步

创建一个项目目录后，首先要在其中初始化npm：

npm init -y //-y即使用默认配置

现在在项目目录下应该有一个package.json文件了，那么接下来就可以先将项目目录都按部就班的搭建好，并且创建html和js文件。为了之后进行各种配置，还需要在项目根目录下配置一个配置文件webpack.config.js：

const path = require('path');

module.exports = {
  entry: './src/index.js',//入口文件，也就是那个需要打包的关键js
  output: {
    filename: '[name].js',//打包后对应的文件名，这里[name]表示名字与之前保持一致
    path: path.resolve(__dirname, 'dist')//打包后的路径
  }
};

以上是一个非常基础的配置，现在就可以在命令行使用webpack命令来构建了。同时如果需要使用自定义名称的配置文件来进行构建，可以用如下方式：

webpack --config 文件名

后面的文件名可以改成自己的配置文件的名字。例如默认的就是webpack.config.js。
在package.json中的"script"中，为了使用方便还可以配置一些快捷命令，比如说：

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

在命令行输入npm build即可使用以上命令。通过自定义的快捷命令，可以根据需要使用不同的模式、不同的配置文件等，就不用每次在命令行手动打太多的命令。关于这一部分可以参照npm scripts文档。
如果使用的是npm 5或以上的版本，项目根目录可能还有一个package-lock.json，该文件简单来说就是锁定依赖包的版本，来保证自己或其他人，在npm install时安装的依赖包版本无误。

资源管理

webpack除了引入js文件外，还能通过多样的loader引入样式、字体等其他的文件资源。
在使用前需要先通过npm安装对应的loader，然后在webpack.config.js中对对应资源进行配置。

javascript

需要添加babel，将新版本的语法再编译，使浏览器能兼容。具体如下：

npm install --save-dev babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime

webpack.config.js中的配置如下：

module: {
  rules: [
    {
      test: /\.js$/,
      include: path.resolve(__dirname,'/src'),
      exclude: path.resolve(__dirname,'/node_modules'),
      use: {
        loader: 'babel-loader',
        options: {
          name: 'js/[name][chunkhash:5].[ext]'//原名称+chunkhash5位编码+原本后缀
          presets: ['@babel/preset-env'],
          plugins: ['@babel/plugin-transform-runtime']
        }
      }
    }
  ]
}

CSS

需要安装style-loader、css-loader

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

webpack.config.js中的配置如下：

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    }
  ]
}

less

除了安装style-loader、css-loader外，还要安装如下依赖：

npm install --save-dev less less-loader

webpack.config.js中的配置和css比较像，如下：

module: {
  rules: [
    {
      test: /\.less$/,
      use: ['style-loader', 'css-loader', 'less-loader'],
    }
  ]
}

sass

除了安装style-loader、css-loader外，还要安装如下依赖：

npm install --save-dev node-sass sass-loader

webpack.config.js中的配置和less很像，如下：

module: {
  rules: [
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    }
  ]
}

html

就只装一个html-loader足够了

npm install --save-dev html-loader

webpack.config.js中的配置也很简单：

module: {
  rules: [
    {
      test: /\.html$/,
      use: ['html-loader'],
    }
  ]
}

图片、字体

也比较简单，需要装一个file-loader

npm install --save-dev file-loader

webpack.config.js中的配置也很简单：

module: {
  rules: [
    {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'file-loader',
      options: {
        name: 'img/[name][chunkhash:5].[ext]'//原名称+chunkhash5位编码+原本后缀
      }
    },
    {
      test: /\.(ttf|eot|svg|woff|woff2)$/,
      loader: 'file-loader',
      options: {
        name: 'font/[name][chunkhash:5].[ext]'//原名称+chunkhash5位编码+原本后缀
      }
    }
  ]
}

配置HtmlWebpackPlugin

HtmlWebpackPlugin对html入口文件的创建进行了简化和各种优化，安装如下：

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

最基础的配置如下：

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

module.exports = {
  entry: ......//省略
  output: ......//省略
  plugins: [
    new HtmlWebpackPlugin()
  ]
};

下面给出我的配置：

new htmlWebpackPlugin({
  filename: 'index.html',//输出后文件名
  template: path.join(__dirname,'./index.html'),//模板html的路径
  favicon: './src/assets/favicon.jpg',//favicon图标
  inject: 'body',//script标签的放置
  minify: {//html压缩
    removeComments: true,//移除注释
    collapseWhitespace: true //移除空格
  }
}),

上面的这几项配置算是很通用的了，除此之外如果有多个入口文件还可以设置对应的chunk。更详细的设置可以参考这里。

配置CleanWebpackPlugin

在之前进行打包的过程中可能你已经遇到过dist文件夹下之前生成的文件不删会越来越多的情况，这时就需要引入CleanWebpackPlugin，这样可以在每次构建前自动清理output.path所指向的目录。

安装：

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

配置和HtmlWebpackPlugin很像，但是不用配置详细参数：

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

module.exports = {
  entry: ......//省略
  output: ......//省略
  plugins: [
    new CleanWebpackPlugin(),//除了引用只需要这么一条就够了
  ]
};

现在再执行webpack命令就应该不会有多余的文件了。

开发工具

webpack观察模式

实际上就是webpack添加一个–watch，命令行中也就是：

wepback --watch

这样的话，只要有文件被更新，代码就会被再次编译，就不用手动在命令行再输入webpack。
为了方便使用，可以在npm scripts中做出配置：

"scripts": {
   "build": "webpack",
   "watch": "webpack --watch"
},

webpack-dev-server

webpack-dev-server能做到实时重新加载，而基本不用手动刷新页面或其他操作，比方说仅仅只是改了个字体颜色，切出编辑器窗口就会自动编译，然后浏览器中的页面就会对应的变化，不用再“F5”。
安装：

npm install --save-dev webpack-dev-server

然后在命令行输入webpack-dev-server命令就行，但还是推荐放到npm scripts中：

"scripts": {
   "build": "webpack",
   "watch": "webpack --watch",
   "start": "webpack-dev-server --open"//--open 自动打开网页 还可以通过参数指定浏览器的种类
},

也可以根据自己的需求进行配置，另外在webpack.config.js中也能做出配置，具体的可以点击这里查看文档：

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

module.exports = {
  entry: ......//省略
  output: ......//省略
  plugins: ......//省略
  devServer: {
    contentBase: './dist'
  },
};

其他配置

devtool

先放配置，webpack.config.js中配置如下：

const path = require('path');

module.exports = {
  entry: ......//省略
  output: ......//省略
  devtool: 'inline-source-map'
};

devtool用来控制是否生成，以及如何生成source map。这里设置成’inline-source-map’，则是为了在控制台能看到报错代码的位置。如果不进行设置的话，从控制台打开的代码就会是编译后的，很难找到具体是什么地方的代码报错，但是进行设置后，就会指引到源文件的位置，可以参考下面的图：
设置后的：


设置前的：

jQuery

在需要jQuery的项目中，可以在webpack.config.js中做出如下配置：

const path = require('path');

module.exports = {
  entry: ......//省略
  output: ......//省略
  plugin: [
    new webpack.ProvidePlugin({
      "$": "jquery",
      "jQuery": "jquery",
      "window.jQuery": "jquery"
    }),
  ]
};

这样在js中就不用到处引入jQuery了，同理还有些其他的模块，可以参考官方文档