前端项目自动化构建工具——Webpack入门教程

时间 2020-07-18

原文原文链接

　　参考资料：https://www.webpackjs.com/（中文文档） https://www.webpackjs.com/（官方文档）css

　　首先有必要说明一下，本文侧重讲解webpack基本配置属性，不附带实例，将会以通俗易懂的形式地讲解；如若须要实例进行相关练习，可将本文做为理论基础；前端

　　Webpack是前端项目自动化构建工具，本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个 bundle。（官网定义）。
node

　　那么用咱们人话来讲：webpack是一个前端模块化的解决方案，更侧重点打包，能够把开发中的资源文件（图片、js文件、css文件等）当作是一个个的模块，而后经过webpack提供的loader（加载器）和plugins（插件）来进行处理、合并以及压缩，打包成符合生产环境、体积更小的文件资源，以方便提高浏览器的渲染速度；webpack

　　首先咱们要理解一下webpack的四大核心概念：web

　　　　入口（entry）正则表达式

　　　　出口（output）数组

　　　　loader（加载器）浏览器

　　　　plugins（插件）安全

　　入口（entry）：　app

　　　　webpack入口指的是经过配置来指示webpack的入口文件，即从哪里开始，咱们能够在webpack中配置entry属性，来指定入口文件的路径；

　　　　　咱们能够看一个简单的案例：

//必须将模块抛出webpack才能访问获得
module.exports = {
  //entry属性指定入口文件    值为相对路径  
  entry: './src/app.js'
}

　　出口（output）：

　　　出口即告诉webpack在哪里输出它所建立的bundles，以及如何命名这些文件，输出的文件目录路径；也就是说在你用webpack打包的时候能够经过添加output属性，来设置最终通过webpack打包输出后的文件名以及输出路径；

//引入node的path模块
const path = require('path');

module.exports = {
  // webpack执行入口文件
  entry: './src/app.js',
   //出口 
  output: {
    // 把全部依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
   //__dirname是node环境中全局变量，表示当前目录
    path: path.resolve(__dirname, './dist'),
  }
};

　　加载器（loader）：

　　　　　loader是让webpack可以去处理一些非Javscript类型的文件（webpack自身只可以识别原生JS和ES5），loader能够将全部类型的文件转为webpack能处理的有效模块，而后就能够经过webpack的打包能力，对这些文件进行处理；loader的配置有两个选项：

　　　　　test：通常都是正则表达式，用于匹配文件类型；

　　　　　use：能够是key：value的形式也能够是数组，用来告诉webpack使用什么loader来加载文件

//引入node的path模块
const path = require('path');

module.exports = {
  // webpack执行入口文件
  entry: './src/app.js',
   //出口 
  output: {
    // 把全部依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
   //__dirname是node环境中全局变量，表示当前目录
    path: path.resolve(__dirname, './dist'),
  }
    //模块关键字，加载器须要在这里进行配置
    module:{
        //rules为数组，保存每一个加载器的配置
        rules:[
            {
                //test属性必须配置，值为正则表达式，用于匹配文件
                test:/\.css$/,
                // 对同一个文件引入多个loader的方法
                use:[
                    //loader为loader加载器的名称，必须配置，值为字符串
                    {loader:"style-loader"},
                    {loader:"css-loader"}
                ],
                
                //过滤，排除node_module目录下的文件
                exclude:/node_module/,
                //指定匹配文件的范围   指定/demo/目录下的.css文件进行匹配
                include:/demo/
            }
        ]
    }
    

};

　　webpack中规定，在webpack中定义loader时，须要定义在module.rules中，不然会报错；test和use两个属性分别指定了匹配文件的规则和用什么loader来处理，这两个属性都是必选的，exclude、include分别表示过滤（不处理）某个文件中的文件和指定（处理）某个文件夹中的文件，这两个属性都是可选项；

　　插件（plugins）：

　　　　loader 被用于转换某些类型的模块，而插件则能够用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量。插件接口功能极其强大，能够用来处理各类各样的任务。要使用某个插件，你须要require（引入）插件，而后添加到plugins数组中，多数插件能够经过选项option来自定义

//引入node的path模块
const path = require('path');
//引入extract-text-webpack-plugin插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // webpack执行入口文件
  entry: './src/app.js',
   //出口 
  output: {
    // 把全部依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
   //__dirname是node环境中全局变量，表示当前目录
    path: path.resolve(__dirname, './dist'),
  }
    //模块关键字，加载器须要在这里进行配置
    module:{
        //rules为数组，保存每一个加载器的配置
        rules:[
            {
                //test属性必须配置，值为正则表达式，用于匹配文件
                test:/\.css$/,
                // 对同一个文件引入多个loader的方法
                use:[
                    //loader为loader加载器的名称，必须配置，值为字符串
                    {loader:"style-loader"},
                    {loader:"css-loader"}
                ],
                
                //过滤，排除node_module目录下的文件
                exclude:/node_module/,
                //指定匹配文件的范围   指定/demo/目录下的.css文件进行匹配
                include:/demo/
            }
        ]
    }
    //配置插件
    plugins: [
    new ExtractTextPlugin({
      //自定义配置插件选项
      // 从 .js 文件中提取出来的 .css 文件的名称
      filename: `[name]_[md5:contenthash:hex:8].css`,
    }),
]
};

　　上面就是webpack的四大核心概念，下面咱们来介绍一些经常使用的插件：

　　loader处理css和Sass：

　　　　默认状况下webpack是处理不了CSS的代码的，可是咱们能够经过webpack的loader加载器来处理；

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

在平常开发中，咱们只须要在webpack.config.js文件中写上上面的配置代码便可让webpack来处理CSS代码和Sass代码；

　　webpack-dev-server：

　　　　　　webpack-dev-server是webpack的一个经常使用插件，能够用来在本地上开启服务、启动浏览器而且能够实时监听文件修改；

module.exports = {
  entry: './src/app.js',
  ...
    //进行webpack-dev-server插件配置
  devServer: {
    //端口号，默认8080，能够自定义修改
    port: 9000,
   //运行webpack-dev-server的时候自动打开浏览器
    open: true
  },
  ...
};

　　source-map调试：

　　　　开发老是离不开调试，可是咱们用webpack给项目打包了以后，咱们是很不方便找到错误或者问题所在的，固然webpack也想到了这一点，所以webpack给咱们提供了source-map来进行调试；

　　　　devtool选项　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　source-map　

　　　　配置结果　　　　　　　　　　　　

　　　　在一个单独的文件中产生一个完整且功能彻底的文件。这个文件具备最好的source map，可是它会减慢打包速度；

　　　　devtool选项　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　cheap-module-source-map

　　　　配置结果　　　　　　　　　　　　

　　　　在一个单独的文件中生成一个不带列映射的map，不带列映射提升了打包速度，可是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试形成不便；

　　　　devtool选项　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　eval-source-map

　　　　配置结果　　　　　　　　　　　　　

　　　使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项能够在不影响构建速度的前提下生成完整的sourcemap，可是对打包后输出的JS文件的执行具备性能和安全的隐患。在开发阶段这是一个很是好的选项，在生产阶段则必定不要启用这个选项；

　　　　devtool选项　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

　　　　cheap-module-eval-source-map　

　　　　配置结果　　　　　　　　　　　　　

　　　　这是在打包文件时最快的生成source map的方法，生成的Source Map会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具备类似的缺点；

　　综上所述，从上到下打包速度愈来愈快，不过同时带来的反作用也越多，较快的打包速度的后果就是对打包后的文件的的执行有必定影响。在中小型项目中，eval-source-map是一个比较不错的选择；

cheap-module-eval-source-map方法构建速度更快，可是不利于调试，推荐在大型项目考虑时间成本时使用。

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

　　在webpack打包以后，若是报错咱们是看不到源文件的，由于此时文件已经被webpack打包了，这很不方便咱们的开发调试，source-map就是用来解决这个问题的，经过添加配置devtool:"eval-source-map"这一行简单的代码，咱们便可在调试的时候看到咱们的源文件进行调试；