Webpack配置

时间  2019-11-24
标签 webpack 配置 繁體版
原文   原文链接

Webpack是目前基于React和Redux开发的应用的主要打包工具。我想使用Angular 2或其余框架开发的应用也有不少在使用Webpack。css

当我第一次看到Webpack的配置文件时，它看起来很是的陌生，我很是的疑惑。通过一段时间的尝试以后我认为这是由于Webpack只是使用了比较特别的语法和引入了新的原理，所以会让使用者感到疑惑。这些也是致使Webpack不被人熟悉的缘由。html

由于刚开始使用Webpack很让人疑惑，我以为有必要写几篇介绍Webpack的功能和特性的文章以帮助初学者快速理解。此文是最开始的一篇。node

Webpack的核心原理react

Webpack的两个最核心的原理分别是：webpack

  1. 一切皆模块 正如js文件能够是一个“模块（module）”同样，其余的（如css、image或html）文件也可视做模 块。所以，你能够require('myJSfile.js')亦能够require('myCSSfile.css')。这意味着咱们能够将事物（业务）分割成更小的易于管理的片断，从而达到重复利用等的目的。web

  2. 按需加载 传统的模块打包工具（module bundlers）最终将全部的模块编译生成一个庞大的bundle.js文件。可是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会致使应用一直处于加载中状态。所以Webpack使用许多特性来分割代码而后生成多个“bundle”文件，并且异步加载部分代码以实现按需加载。npm

好了，下面来看看那些使人困惑的部分吧。json

  1. 开发模式和生产模式数组

    首先要知道的是Webpack有许许多多的特性，一些是”开发模式“下才有的，一些是”生产模式“下才有的，还有一些是两种模式下都有的。浏览器

    输入图片说明

一般使用到Webpack如此多特性的项目都会有两个比较大的Webpack配置文件 为了生成bundles文件你可能在package.json文件加入以下的scripts项：

"scripts": {
// 运行npm run build 来编译生成生产模式下的bundles
"build": "webpack --config webpack.config.prod.js",
// 运行npm run dev来生成开发模式下的bundles以及启动本地server
"dev": "webpack-dev-server"
}

  1. webpack CLI 和webpack-dev-server

    值得注意的是，Webpack做为模块打包工具，提供两种用户交互接口：

    a.Webpack CLI tool：默认的交互方式（已随Webpack自己安装到本地）

    b.webpack-dev-server：一个Node.js服务器（须要开发者从npm自行安装）

    Webpack CLI（有利于生产模式下打包） 这种方式能够从命令行获取参数也能够从配置文件（默认叫webpack.config.js）获取，将获取到的参数传入 Webpack来打包。

    固然你也能够从命令行（CLI）开始学习Webpack，之后你可能主要在生产模式下使用到它。

    用法：

    方式1:

     
    2.  

 

// 全局模式安装webpack npm install webpack --g // 在终端输入 $ webpack // <--使用webpack.config.js生成bundle ```
 

方式 2 :

```
// 非全局模式安装webpack而后添加到package.json依赖里边
npm install webpack --save
// 添加build命令到package.json的scripts配置项
"scripts": {
 "build": "webpack --config webpack.config.prod.js -p",

 }
// 用法：
"npm run build"
 

webpack-dev-server（有利于在开发模式下编译）:    这是一个基于Express.js框架开发的web server，默认监听8080端口。server内部调用Webpack，这样作的好处是提供了额外的功能如热更新“Live Reload”以及热替换“Hot Module Replacement”（即HMR）。

 用法：

   方式 1:

 ```
// 全局安装
npm install webpack-dev-server --save
// 终端输入
$ webpack-dev-server --inline --hot
 

用法 2:

```
 

// 添加到package.json scripts "scripts": { "start": "webpack-dev-server --inline --hot", } // 运行： $ npm start // 浏览器预览： http://localhost:8080
 

Webpack VS Webpack-dev-server选项

   注意像inline和hot这些选项是Webpack-dev-server特有的，而另外的如hide-modules则是CLI模式特有的选项。

    webpack-dev-server CLI选项和配置项 : 另外值得注意的是你能够经过如下两种方式向webpack-dev-server传入参数：

    1.经过webpack.config.js文件的"devServer"对象
    ```
// 经过webpack.config.js传参
devServer: {
  inline: true,
  hot:true
}
 

2.经过CLI选项
 

// 经过CLI传参
 

webpack-dev-server --hot --inline

我发现有时devServer配置项（hot: true 和inline: true）不生效，我更偏向使用以下的方式向CLI传递参数：

```
 

// package.json { "scripts": "webpack-dev-server --hot --inline" } //注意：肯定你没有同时传入hot:true和-hot
 

webpack-dev-server的“hot” 和 “inline”选项 : “inline”选项会为入口页面添加“热加载”功能，“hot”选项则开启“热替换（Hot Module Reloading）”，即尝试从新加载组件改变的部分（而不是从新加载整个页面）。若是两个参数都传入，当资源改变时，webpack-dev-server将会先尝试HRM（即热替换），若是失败则从新加载整个入口页面。

    // 当资源发生改变，如下三种方式都会生成新的bundle，可是又有区别：

    ```
// 1. 不会刷新浏览器
$ webpack-dev-server
//2. 刷新浏览器
$ webpack-dev-server --inline
//3. 从新加载改变的部分，HRM失败则刷新页面
$ webpack-dev-server  --inline --hot
 

     
 
  1.  
    “entry”：值分别是字符串、数组和对象的状况
     
    Enter配置项告诉Webpack应用的根模块或起始点在哪里，它的值能够是字符串、数组或对象。这看起来可能使人困惑，由于不一样类型的值有着不一样的目的。 像绝大多数app同样，假若你的应用只有一个单一的入口，enter项的值你可使用任意类型，最终输出的结果都是同样的。 图片描述
     
    enter：数组类型
     
    可是，若是你想添加多个彼此不互相依赖的文件，你可使用数组格式的值。 例如，你可能在html文件里引用了“googleAnalytics.js”文件，能够告诉Webpack将其加到bundle.js的最后。 图片描述
     
    enter：对象
     
    如今，假设你的应用是多页面的（multi-page application）而不是SPA，有多个html文件（index.html和profile.html）。而后你经过一个对象告诉Webpack为每个html生成一个bundle文件。 如下的配置将会生成两个js文件：indexEntry.js和profileEntry.js分别会在index.html和profile.html中被引用。
     
    图片描述
     
    用法：
     
    2.  

 

//profile.html
<script src=”dist/profileEntry.js”></script>
//index.html
<script src=”dist/indexEntry.js”></script>
 

注意：文件名取自“entry”对象的键名。
 

enter：混合类型

你也能够在enter对象里使用数组类型，例以下面的配置将会生成3个文件：vender.js（包含三个文件），index.js和profile.js文件。

  ![图片描述](https://static.oschina.net/uploads/img/201705/03123917_AjGS.png "在这里输入图片标题")
 

     
 
  1.  
    output：“path”项和“publicPath”项
     
    output项告诉webpack怎样存储输出结果以及存储到哪里。output的两个配置项“path”和“publicPath”可能会形成困惑。
     
    “path”仅仅告诉Webpack结果存储在哪里，然而“publicPath”项则被许多Webpack的插件用于在生产模式下更新内嵌到css、html文件里的url值。
     
    图片描述
     
    例如，在localhost（译者注：即本地开发模式）里的css文件中边你可能用“./test.png”这样的url来加载图片，可是在生产模式下“test.png”文件可能会定位到CDN上而且你的Node.js服务器多是运行在HeroKu上边的。这就意味着在生产环境你必须手动更新全部文件里的url为CDN的路径。
     
    然而你也可使用Webpack的“publicPath”选项和一些插件来在生产模式下编译输出文件时自动更新这些url。
     
    图片描述
     
     
    2.  

 

// 开发环境：Server和图片都是在localhost（域名）下 .image { background-image: url('./test.png'); } // 生产环境：Server部署下HeroKu可是图片在CDN上 .image { background-image: url('https://someCDN/test.png'); }
 

5. 模块加载和链式模块加载

    模块加载器是可自由添加的Node模块，用于将不一样类型的文件“load”或“import”并转换成浏览器能够识别的类型，如js、Stylesheet等。更高级的模块加载器甚至能够支持使用ES6里边的“require”或“import”引入模块。

    例如，你可使用babel-loader来将使用ES6语法写成的文件转换成ES5：

    ```
module: {
 loaders: [{
  test: /\.js$/, // 匹配.js文件，若是经过则使用下面的loader
  exclude: /node_modules/, // 排除node_modules文件夹
  loader: 'babel' // 使用babel（babel-loader的简写）做为loader
 }]
 

链式（管道式）的加载器（从右往左执行）多个loader能够用在同一个文件上而且被链式调用。链式调用时从右到左执行且loader之间用“!”来分割。

例如，假设咱们有一个名为“myCssFile.css”的css文件，而后咱们想将它的内容使用style标签内联到最终输出的html里边。咱们可使用css-loader和style-loader两个loader来达到目的。

```
 

module: { loaders: [{ test: /.css$/, loader: 'style!css' //(short for style-loader!css-loader) }]
 

这里展现它是如何工做的：
   ![输入图片说明](https://static.oschina.net/uploads/img/201705/03135006_8uHF.png "在这里输入图片标题")

    Webpack在模块颞部搜索在css的依赖项，即Webpack检查js文件是否有“require('myCssFile.css')”的引用，若是它发现有css的依赖，Webpack将css文件交给“css-loader”去处理css-loader加载全部的css文件以及css自身的依赖（如，[@import](https://my.oschina.net/u/3201731) 其余css）到JSON对象里，Webpack而后将处理结果传给“style-loader”

    style-loader接受JSON值而后添加一个style标签并将其内嵌到html文件里

6. loader自身能够配置
模块加载器（loader）自身能够根据传入不一样的参数进行配置。
在下面的例子中，咱们能够配置url-loader来将小于1024字节的图片使用DataUrl替换而大于1024字节的图片使用url，咱们能够用以下两种方式经过传入“limit“参数来实现这一目的：
![图片描述](https://static.oschina.net/uploads/img/201705/03124443_CHYU.png "在这里输入图片标题")

7. .babelrc 文件

    babal-loader使用”presets“配置项来标识如何将ES6语法转成ES5以及如何转换React的JSX成js文件。咱们能够用以下的方式使用”query“参数传入配置：

    ```
module: {
  loaders: [
    {
      test: /\.jsx?$/,
      exclude: /(node_modulesbower_components)/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015']
      }
    }
  ]
}
 

然而在不少项目里babal的配置可能比较大，所以你能够把babal-loader的配置项单独保存在一个名为”.babelrc“的文件中，在执行时babal-loader将会自动加载.babelrc文件。

因此在不少例子里，你可能会看到：

```
 

//webpack.config.js module: { loaders: [ { test: /.jsx?$/, exclude: /(node_modulesbower_components)/, loader: 'babel' } ] } //.bablerc { presets: ['react', 'es2015'] } ```
 

     
 
  1.  
    插件
     
    插件通常都是用于输出bundle的node模块。
     
    例如，uglifyJSPlugin获取bundle.js而后压缩和混淆内容以减少文件体积。
     
    相似的extract-text-webpack-plugin内部使用css-loader和style-loader来收集全部的css到一个地方最终将结果提取结果到一个独立的”styles.css“文件，而且在html里边引用style.css文件。
     
     
    2.  

 

//webpack.config.js // 获取全部的.css文件，合并它们的内容而后提取css内容到一个独立的”styles.css“里 var ETP = require("extract-text-webpack-plugin");
 

module: { loaders: [ {test: /.css$/, loader:ETP.extract("style-loader","css-loader") } ] }, plugins: [ new ExtractTextPlugin("styles.css") //Extract to styles.css file ] }
 

注意：若是你只是想把css使用style标签内联到html里，你没必要使用extract-text-webpack-plugin，仅仅使用css loader和style loader便可：

    ```
module: {
 loaders: [{
  test: /\.css$/,
  loader: 'style!css' // (short for style-loader!css-loader)
 }]
 

     
 
  1.  
    加载器（loader）和插件
     
    你可能已经意识到了，Loader处理单独的文件级别而且一般做用于包生成以前或生成的过程当中。
     
    而插件则是处理包（bundle）或者chunk级别，且一般是bundle生成的最后阶段。一些插件如commonschunkplugin甚至更直接修改bundle的生成方式。
     
  
       
   
    1. 处理文件的扩展名
      2.  
  
     
    不少Webpack的配置文件都有一个resolve属性，而后就像下面代码所示有一个空字符串的值。空字符串在此是为了resolve一些在import文件时不带文件扩展名的表达式，如require('./myJSFile')或者import myJSFile from './myJSFile'（译者注：实际就是自动添加后缀，默认是当成js文件来查找路径）
     
     
    2.  

 

{ resolve: { extensions: ['', '.js', '.jsx'] } }
 

就这么多。

做者： 极客教程 
连接：http://www.imooc.com/article/13357
来源：慕课网


        

            

        	





    

		

            
相关文章

            

                

                

                    

                

            


            
相关标签/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公众号
    

    

           欢迎关注本站公众号,获取更多信息

        
    




    

    




	


	







    

        联系我们
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程