TCM的webpack设置与经常使用插件

2019年8月31日 211次阅读 来源: zhangding

0 媒介

本文是针对TCM项目所做的WebPack设置文件总结，重要概述了一些经常运用设置选项和插件运用，对今后的项目有指导意义。
TCM的webpack设置文件包括webapck.config.base.js、webapck.config.dev.js、webapck.config.prod.js三个基础文件， webpack.config.base.js是基础设置文件，webpack.config.dev.js是开辟设置，webpack.config.prod.js是产物设置文件，webpack.config.base.js包括一些webpack.config.prod.js和webpack.config.base.js共有的基础设置，而webpack.config.prod.js和webpack.config.base.js在webpack.config.base.js的基础上增添了一些必要设置。为了引入Node的express API，经由历程dev.js和prod.js对顶层设置举行定义，因而，package.json文件的scripts部份定义了采纳差别设置举行开辟的npm指令：
《TCM的webpack设置与经常使用插件》

以下较多内容是对《入门Webpack，看这篇就够了》做的总结，到场许多网上网络的材料，目标是为了更深的相识TCM中的WebPack设置。

1 为什么用webpack？

Node.js的生长使种种依靠普遍出现，这些依靠包括种种插件、加载器，可以简化开辟流程。模块化是前端生长的一大趋向，基于React的单页运用圆满解释了模块化的观点，经由历程组件的体式格局举行开辟，组件之间相互援用，而且援用外部依靠。为了打包外部依靠以及当地JavaScript模块、SCSS模块、图片等，打包东西应运而生，以WebPack最为有名，相似的另有Gulp/Grunt等。webpack的长处之一就是把一切文件，包括CSS、HTML、图片、JavaScript代码等都视为模块处置惩罚，只需设置中包括响应的loader便可以举行处置惩罚打包。

1.1 WebPack和Grunt以及Gulp比拟有什么特征？

实在Webpack和别的两个并没有太多的可比性，Gulp/Grunt是一种可以优化前端的开辟流程的东西，而WebPack是一种模块化的处理方案，不过Webpack的长处使得Webpack可以替代Gulp/Grunt类的东西。
Grunt和Gulp的事情体式格局是：在一个设置文件中，指明对某些文件举行相似编译，组合，紧缩等使命的具体步骤，这个东西以后可以自动替你完成这些使命。
《TCM的webpack设置与经常使用插件》

Webpack的事情体式格局是：把你的项目当作一个团体，经由历程一个给定的主文件（如：index.js），Webpack将从这个文件最先找到你的项目标一切依靠文件，运用loaders处置惩罚它们，末了打包为一个浏览器可辨认的JavaScript文件。
《TCM的webpack设置与经常使用插件》

2 webpack设置文件经常运用设置项

webpack有一个默许的设置文件webpack.config.js（官方文档），位于项目根目次，也可以根据须要建立多个设置文件，TCMngr设置了三个文件：webpack.base.conf.js/webpack.dev.config.js/webpack.prod.conf.js。在package.json的scripts中增添差别的敕令设置差别的设置文件，在TCMngr的package.json中有

  "scripts": {
    "start": "cross-env NODE_ENV=development node build/dev.js",
    "build": "cross-env NODE_ENV=production node build/prod.js"
  },

可以看到此处运用了cross-env依靠包，这个包许可以UNIX的体式格局设置环境变量，并在windows上平常运转。装置敕令：

    npm install cross-env --save-dev

webpack设置文件实质就是一个JavaScript module，可以运用JavaScript言语，文件会导出一个设置对象，花样以下：

mudule.exports = {};

一切的设置信息都在这个对象中表现，包括：
entry:打包的进口文件，可以使一个字符串或一个对象，假如只要一个须要打包的模块，运用这类情势；假如是一个对象，对象对应的一切文件都被打包，该对象可所以包括多个打包模块的数组，依靠较强的排在前面，也可所以键值对，离别对应差别的输出包，包名就是键名；TCM的webpack.base.conf.js指出了须要打包的文件，包括框架、类库以及进口源码。
《TCM的webpack设置与经常使用插件》

resolve：影响模块剖析的设置，是一个对象，包括以下属性。

resolve.extensions:自动辨认的文件扩大名，假如你想要求一个js文件然则在要求时不带扩大        
（如：require('index')）,那末就须要将'.js'增添到数组中。并非必需设置这一选项，不配
置时会运用默许值["", ".webpack.js", ".web.js", ".js"]，手动设置会致使默许值被覆
盖。假如想要每一个模块都能根据本身的扩大名剖析，要加上空字符串。
resolve.modulesDirectories：目次名构成的数组，会在该目次以及该目次的顶层目次寻觅依靠
模块，默许值是Default: ["web_modules", "node_modules"]。
resolve.root：包括依靠模块的绝对途径，多是目次数组

《TCM的webpack设置与经常使用插件》

resolveLoader：设置和resolve设置相似，只不过是针对loaders设置。
《TCM的webpack设置与经常使用插件》

output：打包的输出结果，是一个对象，包括以下属性：

filename:输出文件名，filename内里的[name]会由entry中的键替代；
path:输出途径；
publicpath:经由历程浏览器接见时的大众URL地点。

《TCM的webpack设置与经常使用插件》

module：定义对模块的处置惩罚逻辑，是一个对象;
loaders:定义一系列自动加载的loader，是一个对象数组；

    [
        {
            test：正则表达式，用于婚配处置惩罚的文件
            loader/loaders:字符串或数组，示意用到的加载器，loader:string示意用!分开的loader，loaders:[]示意用到的加载器数组。
            include:包括的文件夹
            exclude:消除的文件夹
        }
    ]

plugins:定义插件，一个数组，定义一切用到的插件。
《TCM的webpack设置与经常使用插件》

externals：当我们想在项目中require一些其他的类库或许API，而又不想让这些类库的源码被打包时，这在现实开辟中很有必要。此时我们便可以经由历程设置externals参数来处理这个题目：
《TCM的webpack设置与经常使用插件》

如许我们便可以宁神的在项目中运用这些API了：var jQuery = require(“jquery”);

devtool：挑选调试东西，经常运用eval-source-map

//实例
{
    devtool: "#inline-source-map"
}

3 插件（Plugins）和一些东西包

插件（Plugins）是用来拓展Webpack功用的，它们会在全部构建历程当中见效，实行相干的使命。Loaders和Plugins常常被弄混，然则他们现实上是完全差别的东西，可以这么来讲，loaders是在打包构建历程当中用来处置惩罚源文件的（JSX，Scss，Less..），一次处置惩罚一个，插件并不直接操纵单个文件，它直接对全部构建历程其作用。要运用某个插件，我们须要经由历程npm装置它，然后要做的就是在webpack设置中的plugins关键字部份增添该插件的一个实例（plugins是一个数组）。

3.1 webpack-dev-server

平常装置在devDependency中：
npm install webpack-dev-server –save-dev
装置后运用webpack-dev-server即可在浏览器窗口视察输出，浏览器会自动翻开项目根目次的index.html文件，默许端口号是8080，完全地点是http://localhost:8080/。运用敕令webpack-dev-server –hot –inline完成自动革新，为了简写敕令，在package.json的scripts中增添以下语句：

“build” : “webpack-dev-server --hot --inline --config ‘webpack-dev-config.js’”

–config设置默许的webpack设置文件。
devserver作为webpack设置选项中的一项，具有以下设置选项
《TCM的webpack设置与经常使用插件》

在webpack.config.js中表现为：

devServer: {
    contentBase: "./public",//当地服务器所加载的页面地点的目次
    colors: true,//终端中输出结果为彩色
    historyApiFallback: true,//不跳转
    inline: true//及时革新
  }

3.2 Source Maps（使调试更轻易）

WebPack天生source maps，可以对应编译文件和源文件，使得编译后的代码可读性更高，更轻易调试。设置source maps，须要设置devtool，它有以下四种差别的设置选项，各具优缺点，形貌以下：
《TCM的webpack设置与经常使用插件》

上述选项由上到下打包速率越来越快，不过同时也具有越来越多的负面作用，较快的构建速率的结果就是对打包后的文件的的实行有肯定影响。

在进修阶段以及在小到中性的项目上，eval-source-map是一个很好的选项，不过记得只在开辟阶段运用它，以下设置

module.exports = {
  devtool: 'eval-source-map',//设置天生Source Maps，挑选适宜的选项
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

3.3 Babel：编译ES6和JSX

Babel东西包括babel-core/babel-loader/babel-preset-es2015/babel-preset-react,假如运用敕令行还要装置babel-cli。
Babel的设置较为庞杂，反映在webpack.config.js与.babelrc中，webpack.config.js会自动挪用.babelrc中的设置选项。webpack.config.json会包括以下设置

//webpack.config.js
{
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel'
      }

//.babelrc
{
  "presets": ["react", "es2015"]
}

3.4 CSS-loader

webpack供应两个东西处置惩罚款式表，css-loader 和 style-loader，两者处置惩罚的使命差别，css-loader使你可以运用相似@import 和 url(…)的要领完成 require()的功用,style-loader将一切的盘算后的款式到场页面中，两者组合在一起使你可以把款式表嵌入webpack打包后的JS文件中。
Sass 和 Less之类的预处置惩罚器是对原生CSS的拓展，它们许可你运用相似于variables, nesting, mixins, inheritance等不存在于CSS中的特征来写CSS，CSS预处置惩罚器可以这些特别范例的语句转化为浏览器可辨认的CSS语句，在webpack里运用相干loaders举行设置便可以运用了，经常运用的CSS 处置惩罚loaders包括Less Loader、Sass Loader、Stylus Loader。

// TCM中开辟环境下直接内嵌 CSS 以支撑热替代
// autoprefixer自动增添前缀的插件
config.module.loaders.push({
  test: /\.css$/,
  loader: 'style!css!autoprefixer'
}, {
  test: /\.less$/,
  loader: 'style!css!less!autoprefixer'
}, {
  test: /\.scss$/,
  loader: 'style!css!sass!autoprefixer'
});

3.5 浏览器及时同步插件

var   BrowserSyncPlugin = require('browser-sync-webpack-plugin');
config.plugins.push(
  new BrowserSyncPlugin({
    host: '127.0.0.1',
    port: 9090,// 浏览器监听地点
    proxy: 'http://127.0.0.1:9000/',
    logConnections: false,
    notify: false
  }, {
    reload: false
  })
);

3.6 webpack的进度条插件

运用该插件须要在webpack设置中增添以下声明：

var NyanProgressPlugin = require('nyan-progress-webpack-plugin');
plugins: [
  new NyanProgressPlugin()  
]

结果以下：
《TCM的webpack设置与经常使用插件》

3.7 HtmlWebpackPlugin:自动天生HTML插件

这个插件的作用是根据一个简朴的模板，帮你天生终究的Html5文件，这个文件中自动援用了你打包后的JS文件。每次编译都在文件名中插进去一个差别的哈希值。

//装置
npm install --save-dev html-webpack-plugin
//webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin');
config.plugins.push(
new HtmlWebpackPlugin({
    filename: 'index.html',
    template: config.commonPath.indexHTML, //载入文件
    chunksSortMode: 'auto'
  })
);

该插件的设置参数许多：
title: 设置title的名字
filename: 设置这个html的文件名
template:要运用的模块的途径
inject: 把模板注入到哪一个标签后 ‘body’,
favicon: 给html增添一个favicon ‘./images/favico.ico’,
minify:是不是紧缩 {…} | false
hash:是不是hash化 true false ,
cache:是不是缓存,
showErrors:是不是显现毛病,
chunks:现在没太邃晓
xhtml:是不是自动毕业标签 默许false

3.8 Hot Module Replacement

Hot Module Replacement（HMR）也是webpack里很有效的一个插件，它许可你在修正组件代码后，自动革新及时预览修正后的结果。在webpack中完成HMR也很简朴，只须要做两项设置：在webpack设置文件中增添HMR插件；在Webpack Dev Server中增添“hot”参数。不过设置完这些后，JS模块实在照样不能自动热加载的，还须要在你的JS模块中实行一个Webpack供应的API才完成热加载，虽然这个API不难运用，然则假如是React模块，运用我们已熟习的Babel可以更轻易的完成功用热加载。Babel有一个叫做react-transform-hrm的插件，可以在不对React模块举行分外的设置的前提下让HMR平常事情。

//webpack中的设置
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
config.plugins.push(
plugins: [
    new webpack.HotModuleReplacementPlugin()//热加载插件
  ]
);

//装置react-transform-hmr
npm install --save-dev babel-plugin-react-transform react-transform-hmr
//Babel中的设置
{
  "presets": ["react", "es2015"],
  "env": {
    "development": {
    "plugins": [["react-transform", {
       "transforms": [{
         "transform": "react-transform-hmr",
         "imports": ["react"],
         "locals": ["module"]
       }]
     }]]
    }
  }
}

3.9 优化插件

OccurenceOrderPlugin :为组件分派ID，经由历程这个插件webpack可以剖析和优先斟酌运用最多的模块，并为它们分派最小的ID
UglifyJsPlugin：紧缩JS代码；
ExtractTextPlugin：星散CSS和JS文件

    原文作者：zhangding
    原文地址: https://segmentfault.com/a/1190000008491243
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞