码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-09-16 11:52:07      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:include   本地   入口   end   中文   练习   保存   任务   开发调试   

  参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档)

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

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

  那么用我们人话来说:webpack是一个前端模块化的解决方案,更侧重点打包,可以把开发中的资源文件(图片、js文件、css文件等)看成是一个个的模块,然后通过webpack提供的loader(加载器)和plugins(插件)来进行处理、合并以及压缩,打包成符合生产环境、体积更小的文件资源,以方便提升浏览器的渲染速度;

  首先我们要理解一下webpack的四大核心概念:

    入口(entry)

    出口(output)

    loader(加载器)

    plugins(插件)

 

 

  入口(entry): 

    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"这一行简单的代码,我们即可在调试的时候看到我们的源文件进行调试;

 

 

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

标签:include   本地   入口   end   中文   练习   保存   任务   开发调试   

原文地址:https://www.cnblogs.com/dengyao-blogs/p/11526381.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!