[webpack]初览webpack

webpack

概念

webpack 是一个打包工具。工做中不少时候由于时间关系，咱们都有本身的任务，webpack配置的工做通常都是老大来解决。但是为了提升本身的竞争力，我以为仍是要抽时间来认真了解一下wepack。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。

配置

webpack须要别人告诉它要怎么作，也就是配置。通常写在webpack.config.js中。配置项中最重要的有四大项：

1. 入口
2. 输出
3. loader
4. 插件

入口[entry]

入口是webpack读取文件的起点，他会进入入口而后根据依赖关系，找到用到的文件，处理打包。最终输出到bundles文件。

1.单个入口

module.exports = {
    // 指定入口
  entry: './path/to/my/entry/file.js'
};
module.exports = {
    // 指定入口
  entry: {
    main: './path/to/my/entry/file.js'
  }
};

2.对象语法

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

出口[output]

output 属性告诉 webpack 在哪里输出它所建立的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
      // 输出路径
    path: path.resolve(__dirname, 'dist'),
    // 输出文件名
    filename: 'my-first-webpack.bundle.js'
  }
};

2. 多个入口起点

假如入口配置了多个，出口要用占位符[name]来辨别输出的文件。

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

// 写入到硬盘：./dist/app.js, ./dist/search.js

loader

webpack 自身只理解 JavaScript,但是实际中咱们会须要处理不少别的文件，如css,less,vue等等。这就是须要用loader。它是把这些文件转译成webpack能理解的文件。

本质上，webpack loader 将全部类型的文件，转换为应用程序的依赖图（和最终的 bundle）能够直接引用的模块。

const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
      // 定义了一个模块 test和use是必须的配置。它告诉webpack遇到txt后缀文件，先用raw-loader处理一下。
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

当中raw-loader须要本身下载。

npm install --save-dev raw-loader

loader的使用方式有三种。配置，内联，cli。当中配置是最直观明显的。loader还能够在配置中指定多个 loader。

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

插件[plugins]

实际上处理转译，webpack还须要实现打包，压缩等各类功能。这就要用到插件了。

想要使用一个插件，你只须要 require() 它，而后把它添加到 plugins 数组中。多数插件能够经过选项(option)自定义。你也能够在一个配置文件中由于不一样目的而屡次使用同一个插件，这时须要经过使用 new 操做符来建立它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 经过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;s

因为插件能够携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //经过 npm 安装
const webpack = require('webpack'); //访问内置的插件
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

module.exports = config;

模式[model]

经过选择 development 或 production 之中的一个，来设置 mode 参数，能够启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};