最近webpack4配置的学习总结

作者: Mr无愧于心 | 来源:发表于2018-05-09 14:37 被阅读0次

最近webpack4配置的学习总结
webpack4 关于mini-css-extract-plug
webpack4配置vue开发环境
webpack4 splitChunkPlugin配置介绍
Webpack 4 学习03（配置入口和出口的进阶使用）
vue+ts
webpack4入门学习笔记(一)
webpack4入门学习笔记(二)
webpack4入门学习笔记(三)--Babel的使用
webpack4 模板配置及遇到的问题

前提是对webpack有初步的认识概述、使用。

1.webpack4的webpack.config.js的配置框架

module.export={
  entrty:'',//入口
  output:'',//打包出口
  devServer:{},//开发服务器
  module:{},//模块配置
  plugins:[],//插件的配置
  mode:''//更改模式（开发模式、线上模式）
  resolve:{}//配置解析
}

每次修改代码都要重新打包、打包后都要找到html文件，然后打开浏览器是很耗时的，于是有了devServer。

2.配置开发服务器（devServer）

能够在本地开启服务，
能够进行服务器压缩，
能自动打开浏览器，
能够监听你的代码的修改，并自动刷新显示修改后的结果

devServer的配置

安装： npm i webpack-dev-server –D

devServer:{
    contentBase:path.resolve(__dirname,'dist'),// 配置开发服务运行时的文件根目录 （把出口js打包到dist文件夹下，运行目录就是dist）
    host:'localhost',//开发服务器监听的主机地址 
    compress:true,//开发服务器是否启动gzip等压缩 
    port:3000,//开发服务器监听的端口 
    open:true,// 自动打开浏览器
    // hot:true//开启模块热替换（此项配置需要插件配合，请继续阅读下文）
  }，

每次打包，开启一个开发服务器devServer，都要输入一大段的代码，很麻烦，那就需要简化命令。

3.命令行的简化

修改pack.json文件中的scripts配置即可自定义执行命令

"scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },

这样

在命令行输入 npm run build 相当于执行了对应的webpack打包。
在命令行输入 npm run start相当于执行了对应的webpack-dev-server开启了一个开发服务器。

如果不知道打包后js的名字，所以一旦打包后的名字改变，那么就需要手动的修改html的script的src的地址，这样是很耗时的，所以webpack提供了自动产出HTML文件的功能，并在里边引入打包后的js文件

4.自动产出html文件插件（html-webpack-plugin）

如果你有这么一个疑问：html文件如果有很多内容的情况下，怎么能自动产出呢？

没关系：我们只需要一个html文件的作为模板即可解决（一般作为一个VUE单页面应用的话，html文件中有一个<div id="app"></div>元素就够了）
html模板一般是这种情况的

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title><%=htmlWebpackPlugin.options.title%></title>
      <!--动态的title，对应下文配置中的title属性-->
    <link type="text/css" href="./src/assets/css/common.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

html-webpack-plugin的配置说明

 安装： npm i html-webpack-plugin
 引入插件：let HtmlWebpackPlugin = require('html-webpack-plugin');
 ***（插件都是面向对象的类，所以插件的配置都需要new 一个它的实例）***

 plugins:[
   new HtmlWebpackPlugin({
     filename:'a.html',//自动生成的html文件的名字（不配置此项的话，默认为模板的名字index.html）
     template:'./src/index.html',//模板的路径
     title:'新生成的html的title',//此配置需要模板html的配合：<title><%=htmlWebpackPlugin.options.title%></title>
     hash:true,//为了防止缓存可以给生成的html文件引入的js加上hash值（需要出口文件的配合）
     //chunks: ['index']//chunks 选项的作用主要是针对多入口(entry)文件。当你有多个入口文件的时候，对应就会生成多个编译后的 js 文件。那么 chunks 选项就可以决定是否都使用这些生成的 js 文件。(此处先不做配置)
   }),
 ],

以下是生成在build文件夹（output路径）下的a.html和对应带有hash的build.js文件。

QQ图片20180507160953.png

因为hash的原因，所以每次都会产生一个不同hash的js文件，所以需要我们，每生成一个html文件之前都消灭之前生成的js文件。

5.自动清除文件插件（clean-webpack-plugin）

他能清除一个文件夹下的所有文件(防止产生的带有不同hash值的js文件太多)

单入口文件的自动产出html文件示例：

let path = require('path');
+ let HtmlWebpackPlugin = require('html-webpack-plugin');
+ let CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
  entry:'./src/index.js', // 入口
  output:{//出口
    + filename:'build.[hash:8].js',//[hash:8]代表有8个随机数的hash值
    path: path.resolve('./build')
  },
  /*devServer:{
    contentBase:'./build',
    port:3000,
    compress:true,// 服务器压缩
    open:true,// 自动打开浏览器
    // hot:true
  },// 开发服务器*/
  module:{}, // 模块配置
  plugins:[
    // 打包html插件
    + new CleanWebpackPlugin(['./build']),//清除build下的所有文件
    + new HtmlWebpackPlugin({
       filename:'a.html',
       template:'./src/index.html',
       title:'新生成的html的title',
       hash:true
      // minify:{
      //   removeAttributeQuotes:true,//移除生成的html文件中的无用引号
      //   collapseWhitespace:true//移除生成的html文件中的无用空格
      // }
    })
  ],
  mode:'development', // 可以更改模式
  resolve:{}, // 配置解析
}

6.对于多页面应用自动产出html的处理（多入口，多出口）

关键点

入口配置
出口配置
HtmlWebpackPlugin插件的chunks配置

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  entry:{ // 多入口 多出口
    index:'./src/index.js',
    a:'./src/a.js'
  },
  output:{
    filename:'[name].[hash:8].js',
    path: path.resolve('./build')
  }, 
  devServer:{
    contentBase:'./build',
    port:3000,
    compress:true,
    open:true
  },
  module:{}, 
  plugins:[
    new CleanWebpackPlugin(['./build']),
    new HtmlWebpackPlugin({
      filename:'a.html',//在./build目录下生成一个a.html
      template:'./src/index.html',
      title:'',
      hash:true,
      chunks: ['index']//生成的a.html中引入index.js出口打包后的带hash的js文件
    }),
    new HtmlWebpackPlugin({
      filename:'b.html',//在./build目录下生成一个b.html
      template: './src/index.html',
      title: '',
      hash: true,
      chunks:['a']//生成的b.html中引入a.js出口打包后的带hash的js文件
    })
  ],
  mode:'development', 
  resolve:{}, 
}

生成的b.html引入a.1c103022.js
生成的a.html引入index.1c103022.js

image.png

7.用loader加载css文件

因为webpack只识别js，所以css文件和图片等都需要用加载器进行编译。

一般的css处理（将js中引入的css文件当做行内样式尽心引入）

安装 npm i style-loader css-loader -D
配置加载器 :
module: {
       rules:[
            {
                test:/\.css$/,//匹配所有的以.css结尾的文件
                use:['style-loader','css-loader'],//使用加载器
                include:path.join(__dirname,'./src'),//处理这个文件夹下的文件
                exclude:/node_modules/,//不处理这个文件夹下的文件
            }
        ]
    },

index.js中引入./index.css: import './index.css'; 打包解析后的页面结构:

image.png

8.编译less 和 sass

安装：
npm i less less-loader -D
npm i node-saas sass-loader -D

module: {
        rules: [{
            test: /\.less$/,
            use: [{
                loader: "style-loader" // 将 JS 字符串生成为 style 节点
            }, {
                loader: "css-loader" //将 CSS 转化成 CommonJS 模块
            }, {
                loader: "less-loader" // 将 less编译成 CSS
            }]
        },//sass解析方式和less一致
      ]
    }

9.把编译的样式抽离成单独的css文件（extract-text-webpack-plugin）

以上的编译方式会把所有的样式都写到html文件的行内样式，会显得html文件过于臃肿，所以需要把css分离出来(改为在html文件中用link引入)

css 文件抽离插件配置

安装：npm install --save-dev extract-text-webpack-plugin

引入：let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');
配置
          {//编译并抽离引入的css文件
               test:/\.css$/,
               use: ExtractTextWebpackPlugin.extract({
                    use:'css-loader'
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
           {//编译并抽离引入的less文件
              test: /\.less$/, use: ExtractTextWebpackPlugin.extract({
              use:[
                  { loader: 'css-loader' },
                  { loader: 'less-loader' }
                  ]
          })
        }
   ...
   plugins: [
      new ExtractTextWebpackPlugin('css/index.css'),//抽离成一个文件
  ]

10.处理CSS3属性前缀

为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀
1. Trident内核：主要代表为IE浏览器, 前缀为-ms
2. Gecko内核：主要代表为Firefox, 前缀为-moz
3. Presto内核：主要代表为Opera, 前缀为-o
4. Webkit内核：产要代表为Chrome和Safari, 前缀为-webkit

配置

安装：npm i postcss-loader autoprefixer -D
新建postcss.config.js ：

module.exports={
    plugins:[require('autoprefixer')]
}

webpack.config.js配置

const ExtractTextWebpackPlugin=require('extract-text-webpack-plugin')//引入抽离的插件
.....
            {
                test:/\.css$/,
                use: cssExtract.extract({
                   use:['css-loader','postcss-loader']//使用postcss-loader加载器补全前缀
                }),
                include:path.join(__dirname,'./src'),
                exclude:/node_modules/
            },
.....
plugins: [
      new ExtractTextWebpackPlugin('css/index.css'),//抽离成css/index.css
  ]

当引入公共css时，或者bootstrap这种css文件时，好多的样式是用不到的，所以需要把多余的样式删掉，简化代码。

11.删除没用的css样式（purifycss-webpack）

安装：npm i purifycss-webpack -D
引入：let PurifycssWebpack = require('purifycss-webpack');
           let glob = require('glob');//匹配路径的模块
配置：
// 没用的css会被消除掉，一定放在htmlwebpackPlugin后面
    new PurifycssWebpack({
      paths:glob.sync(path.resolve('src/*.html'))//匹配所有的src下的html文件，删除多余的样式
    })

12.编译图片

配置完 css样式，less，sass抽离、压缩、加前缀等，接下来要处理关于图片的问题。

file-loader 解决CSS等文件中的引入图片路径问题
url-loader 当图片较小的时候会把图片BASE64编码，大于limit参数的时候还是使用file-loader 进行拷贝

安装
npm i file-loader url-loader -D

入口文件js引入图片
用 require：
let userImg=require('./images/userImg.png')
console.log(userImg)//base64格式的乱码
let img=new Image();
img.src=userImg;
document.body.appendChild(img);

处理打包后图片路径问题 
const PUBLIC_PATH='/';
output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath:PUBLIC_PATH //打包后访问资源的基准路径
    },

配置：
     {
        test:/\.(jpg|png|gif|svg)$/,
        use:'url-loader',
        include:path.join(__dirname,'./src'),
        exclude:/node_modules/,
         options: {
             limit: 1024,//小于1M编码成base64方式引入图片
             outputPath:'images/'//指定打包后的图片位置 
         }
      }

在HTML文件中引入图片的情况处理

安装：
npm i html-withimg-loader -D

html中引入
<img src="./images/logo.png" alt="logo.png">

webpack.config.js中的配置
 {
    test:/\.(html|html)$/,
    use:'html-withimg-loader',
    include:path.join(__dirname,'./src'),
    exclude:/node_modules/
  }

13.热替换（改哪个文件就自动刷新哪个文件，不用所有文件都重新打包，节约性能和时间）

devServer: {
    contentBase: './build',
    port: 3000,
    compress: true,
    open: true,
   + hot: true//开启热替换
  },
plugins:[
 + new webpack.HotModuleReplacementPlugin(),//配置热替换的插件
]

入口文件js的配置

在入口js文件的最后，添加以下代码
if(module.hot){
  module.hot.accept();
}

14.转义ES6/ES7/JSX （Babel）

安装
npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 babel-preset-react -D

配置

{
        test:/\.jsx?$/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ["env","stage-0","react"]
            }
        },
        include:path.join(__dirname,'./src'),
        exclude:/node_modules/
        },

其中一般情况会把配置文件拿出来。像这样：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
      }
    }
  ]
}

新建.babelre文件

{
  "presets": ["es2015", "stage-2",["env", { "modules": false }]],
  "plugins": ["transform-runtime"],
  "comments": false
}

jsx语法处理（jsx-loader）

module.exports ={
 entry: './entry.js',
 output: { path: __dirname,
 filename: 'bundle.js'
 },
 module: {
loaders: [
  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
  {test: /\.jsx$/, loader: "jsx-loader"}
  {test: /.css$/, loader: 'style!css'} ]
  }
};

新建.babelrc的文件

{
  "presets": ["es2015","react"],
  "plugins":["antd"]
}

16.resolve解析

1.自动添加扩展名进行匹配 (extension)

指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配

 resolve: {
    //自动补全后缀，注意第一个必须是空字符串,后缀一定以点开头
   extensions: [" ",".js",".css",".json"],
 },

2.配置别名(alias)

每当引入jquery模块的时候，它会直接引入jqueryPath,而不需要从node_modules文件夹中按模块的查找规则查找

        resolve:{
                alias:{
                    jquery:"./lib/jquery/jquery.js"
                }
            }
        //在入口文件 中直接引入 jquery（require('jquery')）即可    不用再加那么多的路径

17. 如何调试打包后的代码

webapck通过配置可以自动给我们source maps文件，map文件是一种对应编译文件和源文件的方法

source-map 把映射文件生成到单独的文件，最完整最慢
cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Map
eval-source-map 使用eval打包源文件模块,在同一个文件中生成完整sourcemap
cheap-module-eval-source-map sourcemap和打包后的JS同行显示，没有映射列

devtool:'eval-source-map'

18. 区分环境变量

许多 library 将通过与 process.env.NODE_ENV 环境变量关联，以决定 library 中应该引用哪些内容。例如，当不处于生产环境中时，某些 library 为了使调试变得容易，可能会添加额外的日志记录(log)和测试(test)。其实，当使用 process.env.NODE_ENV === 'production' 时，一些 library 可能针对具体用户的环境进行代码优化，从而删除或添加一些重要代码。我们可以使用 webpack 内置的 DefinePlugin 为所有的依赖定义这个变量：

npm install cross-env -D

  "scripts": {
+    "build": "cross-env NODE_ENV=production webpack --mode development",
     "dev": "webpack-dev-server --open --mode development "
  },

 plugins: [
+        new webpack.DefinePlugin({
+            NODE_ENV:JSON.stringify(process.env.NODE_ENV)
+        }),

if (process.env.NODE_ENV == 'development') {
    console.log('这是开发环境');
} else {
    console.log('这是生产环境');
}

vue项目的webpack处理

安装vue-loader vue-template-compiler

-vue-loader 解析.vue文件的，vue会自动的调用vue-template-compiler，只需要配置vue-loader即可
-vue-template-compiler用来解析vue模板的

配置

module: {
  rules: [
    ...
    {
      test: /\.vue$/,
      use: {
        loader: 'vue-loader',
      }
    }
    ...
  ]
}

基于以上一个完整的webpack配置

webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');//自动生成html插件
let CleanWebpackPlugin = require('clean-webpack-plugin');//清除文件插件
let webpack = require('webpack');
let ExtractTextWebpackPlugin = require('extract-text-webpack-plugin');//抽离css文件
module.exports = {
  entry: './src/index.js',//入口文件
  output: {
    filename: '[name].[hash:8].js',//出口文件名字（带有hash值的）
    path: path.resolve('./build')//出口文件路径
  },
  devServer: {
    contentBase: './build',//资源查询根目录
    host:'localhost',//webpack服务监听主机
    port: 3000,//webpack服务监听端口
    compress: true,// 服务器压缩
    open: true,//打包后自动打开浏览器
    hot: true//开启模块热替换
  },
  plugins: [
    new ExtractTextWebpackPlugin({
      filename:'css/index.css'//抽离文件名
    }),
    new webpack.HotModuleReplacementPlugin(),//引入模块热替换插件
    new CleanWebpackPlugin(['./build']),//每次打包前自动清除build文件夹下的内容
    new HtmlWebpackPlugin({//自动生成html文件配置
      template: './src/index.html',//生成的html文件的模板
      title: 'title',//生成的html文件的标题
      hash: true,//生成的html文件引入打包后的js是带hash值的（避免缓存）
      // minify:{
        //   removeAttributeQuotes:true,//生成的html文件去掉没用的引号
        //   collapseWhitespace:true//生成的html文件去掉没用的空格
      // }
    }),
    new webpack.DefinePlugin({//区分环境变量 
      'process.env':{
        'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
      }
    }),
  ],
  mode: 'development',//mode可以更改模式(此处代表开发模式)
  resolve: {
     alias:{
             jquery:"./lib/jquery/jquery.js"//引入jquery直接使用jQuery即可，不用在写全路径。
            }
  },
  module: {
    rules: [ 
      {
        test: /\.js$/,
        loader: 'babel-loader',//处理es6
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,//编译图片
        loader: 'file-loader',
        options: {
            limit: 1024,//小于1M编码成base64方式引入图片
            outputPath:'images/'//指定打包后的图片位置 
        }
      },
     {
        test: /\.css$/, use: cssExtract.extract({//编译css文件（并抽离出去）
          use: [
            { loader: 'css-loader' },
            { loader:'postcss-loader']}//给css的样式加前缀
          ]
        })
      },
      {
        test: /\.less$/, use: LessExtract.extract({//编译less文件（并抽离出去）
          use:[
            { loader: 'css-loader' },
            { loader: 'less-loader' }
          ]
        })
      },
    ]
  },
}

.babelrc文件

{
  "presets": ["react", "env"],
  "plugins": []
}

postcss.config.js

 module.exports={
    plugins:[require('autoprefixer')]
}

入口文件。。。。

import './index.css';//引入css
let userImg=require('./userImg.jpg')//引入图片

if(module.hot){//热替换代码
  module.hot.accept();
}

package.json文件

{
  "name": "webpack-public",
  "version": "1.0.0",
  "description": "WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/zhufengzhufeng/webpack-public5.4.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/zhufengzhufeng/webpack-public5.4/issues"
  },
  "homepage": "https://github.com/zhufengzhufeng/webpack-public5.4#readme",
  "devDependencies": {
    "autoprefixer": "^8.4.1",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "glob": "^7.1.2",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.0.2",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.0",
    "postcss-loader": "^2.1.5",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "webpack": "^4.7.0",
    "webpack-cli": "^2.1.2",
    "webpack-dev-server": "^3.1.4"
  }
}

index.html文件模板

//页面只需要一个div即可
<div id='app'></div>

具体情况最重要的是具体分析。。。。。

最近webpack4配置的学习总结
前提是对webpack有初步的认识概述、使用。 1.webpack4的webpack.config.js的配置框架...
webpack4 关于mini-css-extract-plug
最近在学习webpack4配置，其中mini-css-extract-plugin可以把css文件从打包后的js文...
webpack4配置vue开发环境
本文总结Webpack4常见的配置。1、基础配置（让项目跑起来）2、webpack处理css3、webpack处理...
webpack4 splitChunkPlugin配置介绍
webpack4 splitChunkPlugin配置介绍前言 webpack4删除了CommonsChunkP...
Webpack 4 学习03（配置入口和出口的进阶使用）
前提：知道webpack4的基础配置以及如何使用配置文件进行打包第一讲 Webpack 4 学习01（基础配置） ...
vue+ts
找到对应配置升级webpack4
webpack4入门学习笔记(一)
系列博客链接 webpack4入门学习笔记(一) webpack4入门学习笔记(二) webpack4入门学习笔记...
webpack4入门学习笔记(二)
系列博客链接 webpack4入门学习笔记(一) webpack4入门学习笔记(二) webpack4入门学习笔记...
webpack4入门学习笔记(三)--Babel的使用
系列博客链接 webpack4入门学习笔记(一) webpack4入门学习笔记(二) webpack4入门学习笔记...
webpack4 模板配置及遇到的问题
讲在前面最近在学习 webpack4 的相关知识，整理了一个 webpack4 的基础模板 ===> 戳我 <=...

最近webpack4配置 的学习总结