导语：今天，咱们正式介绍一下前端构建打包神器，webpack。这是一款非常流行的打包工具，和各种框架都非常搭配。

目录

• 简介
• 核心概念

简介

大家好！今天我开始分享有关web前端的故事。俗话说：“男怕入错行，女怕嫁错郎”。如果能够进入发展前景比较好的行业是一个不错的选择，对自己以后的成长与发展都会起到很大的作用。虽然说目前还看不出什么，但是相信随着时间的流逝，这个行业会越来越好。而我选择的这个行业，就是互联网行业，属于服务业。而我目前从事的是前端，这个从2015年兴盛起来的职业，目前已经度过了寒冬，正迎来蓬勃的生机。

核心概念

接下来就解释一下这四个核心的概念。

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

入口(entry)

入口：所谓入口，就是指示webpack应该使用哪个模块来作为内部依赖的开始，它会根据入口来生成一个bundles文件。

例如：

module.exports = {
  entry: './path/to/my/entry/file.js'
};

上面就是指定入口文件，就是file.js。

输出(output)

出口：就是打包输出到哪个文件夹下面去。

例如：

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'
  }
};

上面就是指定出口文件dist，文件名称叫dist文件夹下面的这个文件my-first-webpack.bundle.js。

loader

loader:就是让webpack去处理那些非JavaScript文件，并且导入任何类型的模块，比如css。并且，进行处理。它可以将所有类型的文件，转化为可以直接引用的模块。

例如：

//定义规则
const path = require('path');const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' } //解析规则
    ]
  }
};
// 导出配置
module.exports = config;

这个就是，模块打包规则。test,use,就是告诉webpack遇到引用txt文件的，使用raw-loader转化一下。

插件(plugins)

这是最后一个核心概念。有时候，前面的不一定处理过来，所以靠扩展插件来提高打包效率是一个非常有效的方法。 它可以执行更多复杂的任务，例如：打包优化，压缩，重新定义环境变量等等。

插件的使用方法见下面的代码。

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

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

总结

我们今天先说到这里，下次继续聊webpack。