webpack4初进修

2019年8月20日 108次阅读 来源: sourcenode

webpack基于node，因而想要进修webpack首先要装置node。
webpack4要装置node8.2以上版本。

1、装置webpack

为何挑选当地装置，主如果由于今后引见热更新这一部份不会报错，如果全局装置热更新就会报错，以本部份为基础顺次引见，保证各部份不会失足。

mkdir webpack-test
cd webpack-test
npm init //初始化npm，都挑选默许，文件夹自动建立package.json
npm i webpack webpack-cli -D  // 当地装置webpack

★ npm i -D 是 npm install –save-dev 的简写，是指装置模块并保留到 package.json 的 devDependencies中，主要在开辟环境中的依靠包

2、初试0设置打包

webpack4可以支撑0设置打包，这里所说的0设置又是什么呢？固然在开辟者眼中0设置的东西，那根本是没法用的，由于不够智能，那末我们就来看看做到了哪些0设置。
在运用webpack举行打包的时刻，默许状况下会将src下的进口文件(index.js)举行打包。

a. 根目次下建立文件夹src,并建立index.js文件

document.write('Hello webpack!')

b. 打包测试

  • 如果直接打包：

《webpack4初进修》
末了提醒：
WARNING in configuration //设置正告
大致意义：是mode没有设置，webpack临盆环境没法猎取mode值，请设置mode来肯定开辟环境照样临盆环境

  • 经由过程以下手腕皆可以不报错：
// node v8.2版本今后都邑有一个npx
// npx会实行bin里的文件

npx webpack     // 不设置mode的状况下 打包出来的文件自动紧缩
npx webpack --mode development  // 设置mode为开辟形式，打包后的文件不被紧缩

《webpack4初进修》

当实行npx webpack敕令的时刻，webpack会自动查找项目中src目次下的index.js文件，然后举行打包，天生一个dist目次并存在一个打包好的main.js文件
这些算是0设置的操作了，名字都是定义好的，不能变，想一想也很鸡肋

目次构造：
《webpack4初进修》

3、设置实行文件

  • 从新建立目次：lesson_test
  • 初始化：npm init //悉数挑选默许即可
  • 建立webpack.config.js设置文件

webpack.config.js基础设置项：

module.exports = {
    entry: '',               // 进口文件
    output: {},              // 出口文件
    module: {},              // 处置惩罚对应模块
    plugins: [],             // 对应的插件
    devServer: {},           // 开辟效劳器设置
    mode: 'development'      // 形式设置
}

a.根目次下建立src文件夹，并在src目次下建立index.js:

document.write('Hello webpack!')

b.设置文件webpack.config.js：

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, './dist')
    },
    mode: 'development'
}

c.实行webpack

《webpack4初进修》

经由过程简朴打包，在根目次下多出一个文件夹

《webpack4初进修》

《webpack4初进修》

检察一下dist文件夹下bundle.js可见以下代码，证实打包胜利
《webpack4初进修》

友谊提醒：

在我们每次npm run build的时刻都邑在dist目次下建立许多打好的包，如果积聚过量可以也会杂沓,所以应该在每次打包之前将dist目次下的文件都清空，然后再把打好包的文件放进去
这里供应一个clean-webpack-plugin插件

npm i clean-webpack-plugin -D

webpack.config.js中增加以下设置代码：

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

module.exports = {
    plugins: [
        // 打包前先清空
        new CleanWebpackPlugin('dist')  
    ]
}

4、设置开辟环境/临盆环境

上边部份我们测试已发明，直接打包会正告设置环境，本部份偏重引见一下。

环境设置在package.json文件：

{
  "name": "lesson_test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development", // 开辟环境，和上部份npx webpack --mode development对照我们可以发明点端倪
    "build": "webpack --mode production" // 临盆环境
  },
  "author": "",
  "license": "ISC"
}

开辟环境和临盆环境打包会有什么区分呢？
“dev”: “webpack –mode development”, // 开辟环境，打包后文件是未紧缩的文件
“build”: “webpack –mode production” // 临盆环境，打包后文件是紧缩过的文件

设置完成后，经由过程实行敕令：

a. 实行 npm run dev

《webpack4初进修》

打包后文件为非紧缩文件

《webpack4初进修》

b. 实行 npm run build

《webpack4初进修》

打包后文件为紧缩文件

《webpack4初进修》

5、多文件进口设置

如果src目次下多个文件进口，又该怎样设置webpack.config.js文件呢。
《webpack4初进修》

详细计划：

  • 一种是没有关联的然则要打包到一同去的，可以写一个数组，完成多个文件打包
  • 另一种就是每个文件都零丁打包成一个文件的

下面就来看看这两种体式格局的写法，设置代码：

const path = require('path')

module.exports = {
    // 1.写成数组的体式格局就可以够打出多进口文件，不过这里打包后的文件都合成了一个
    // entry: ['./src/index.js', './src/login.js'],
    // 2.真正完成多进口和多出口须要写成对象的体式格局
    entry: {
        index: './src/index.js',
        login: './src/login.js'
    },
    output: {
        // 1. filename: 'bundle.js',
        // 2. [name]就可以够将出口文件名和进口文件名一一对应
        //filename: '[name].js', // 打包后会天生index.js和login.js文件
        filename: '[name].[hash:16].js', //天生文件名含有16位哈希值
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development'
}

实行npm run dev结果

《webpack4初进修》

目次构造（天生文件的名字带有16位哈希值）：

《webpack4初进修》

6、打包html设置

webpack的中心功用是打包js的，html、style、css、less、sass、img等等须要引入种种loader，抵达这一部份，每一步都须要引入对应的插件。

html须要装置html-webpack-plugin插件，最先引入：

npm i html-webpack-plugin -D  // 当地装置

由因而个插件，所以须要在webpack.config.js里援用一下。

a. 单文件进口设置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入html打包插件

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            hash: true // 在html模板中自动增加？20位哈希值
        })
    ],
    mode: 'development'
}

实行npm run dev 天生目次

《webpack4初进修》

翻开index.html文件，可见js文件后增加了“？20位哈希值”
《webpack4初进修》

b. 多文件进口设置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'],  // 对应关联,main.js对应的是index.html,这里特地修正成main，轻易明白，以下会和目次文件作对照就一览无余了
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'],  // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        })
    ],
    mode: 'development'
}

由目次可见，dist文件夹下天生index.html对应main.js、login.html对应login.js
《webpack4初进修》

《webpack4初进修》

《webpack4初进修》

上面基础引见完了html和js的打包设置了，如今我们还缺一个好兄弟css，webpack对css的剖析须要用到loader，所以我们先提早装置好，待会好轻易运用

7、引入css文件

这里涉及到两种款式：

  • html页面内style款式 <style>/详细款式/</style>,本部份引见
  • html引入外部款式表 <link href=”…” rel=”stylesheet” />第8部份引见
npm i style-loader css-loader -D  // style\css

// 引入less文件的话，也须要装置对应的loader
npm i less less-loader -D

文件目次构造
《webpack4初进修》

a. 设置款式
《webpack4初进修》

《webpack4初进修》

b. 在js文件中引入款式

《webpack4初进修》

《webpack4初进修》

c. 设置webpack.config.js文件

申明：设置module增加划定规矩，本部份增加可css、less的婚配打包划定规矩

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'],  // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'],  // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        })
    ],
    mode: 'development'
}

d. 实行npm run dev打包

天生静态文件index.html

《webpack4初进修》

天生静态文件login.html

《webpack4初进修》

  • 此时打包后的css文件是以行内款式style的标签写进打包后的html页面中，如果款式许多的话，我们更愿望直接用link的体式格局引入进去，这时刻须要把css拆分出来
  • extract-text-webpack-plugin插件置信用过的人都晓得它是干什么的，它的功能就在于会将打包到js里的css文件举行一个拆分

8、拆分css文件

本部份也就是将css文件拆分出来，html页面以<link>的体式格局引入。

// @next示意可以支撑webpack4版本的插件
npm i extract-text-webpack-plugin@next -D

设置webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') // 引入插件

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ExtractTextWebpackPlugin.extract({
                    // 将css用link的体式格局引入就不再须要style-loader了
                    use: 'css-loader'
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'],
            hash: true
        }),
        new ExtractTextWebpackPlugin('css/style.css') // 拆分后会把css文件放到dist目次下的css/style.css
    ],
    mode: 'development'
}

设置中只对index.html文件引入款式，而login.html没有引入，因而要解释掉login.js引入的款式

// import './less/style.less' // 解释掉这句代码

document.write('<h1 class="color-blue">Welcome to webpack!</h1>')

实行npm run dev,天生dist目次

《webpack4初进修》

首页静态页面代码，可见以link的体式格局引入了css款式

《webpack4初进修》

9、拆分多个css文件

设置webpack.config.js文件

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

// 款式处置惩罚
const styleCss = new ExtractTextWebpackPlugin('./css/style.css')
const styleLess = new ExtractTextWebpackPlugin('./css/style2.css')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: styleCss.extract({
                    use: 'css-loader'
                })
            },
            {
                test: /\.less$/,
                use: styleLess.extract({
                    use: ['css-loader', 'less-loader'], // 肯定要注意这里
                    fallback: 'style-loader' // 缺乏这里也是没法编译less
                })
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'],  // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'],  // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        styleCss,
        styleLess
    ],
    mode: 'development'
}

index.js文件

import './css/style.css'
import './less/style.less' // 引入style.less

document.write('<h1 class="color-red">Hello webpack!</h1><h2 class="color-blue">测试less款式是不是引入</h2>')

实行 npm run dev ,猎取静态页面截图，可见悉数一般引入

《webpack4初进修》

实行结果

《webpack4初进修》

天生文件目次：

《webpack4初进修》

10、款式表援用图片

  • 处置惩罚图片方面，也须要loader
npm i file-loader url-loader -D

这里偏重引见一下file-loader和url-loader：

  • 本部份引见url-loader（加强的file-loader）；
  • url-loader作用：依据需求挑选性的把某些小图片编码成base64花样写进页面；从而削减效劳器要求。优化机能。

url-loader处理的题目:
如果图片较多，会发许多http要求，会下降页面机能。url-loader会将引入的图片编码，天生dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，终究只须要引入这个文件就可以接见图片了。固然，如果图片较大，编码会斲丧机能。因而url-loader供应了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会运用file-loader举行copy。

url-loader和file-loader是什么关联呢？
简答地说，url-loader封装了file-loader。url-loader不依靠于file-loader，即运用url-loader时，只须要装置url-loader即可，不须要装置file-loader，由于url-loader内置了file-loader。

经由过程上面的引见，我们可以看到，url-loader事情分两种状况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL；
2.文件大小大于limit，url-loader会挪用file-loader举行处置惩罚，参数也会直接传给file-loader。因而我们只须要装置url-loader即可。

如果是在css文件里引入的如背景图之类的图片，就须要指定一下相对途径
webpack.config.js设置：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

// 款式处置惩罚
const styleCss = new ExtractTextWebpackPlugin('./css/style.css')
const styleLess = new ExtractTextWebpackPlugin('./css/style2.css')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: styleCss.extract({
                    use: 'css-loader',
                    publicPath: '../' // 款式依据相对途径援用到图片资本
                })
            },
            {
                test: /\.less$/,
                use: styleLess.extract({
                    use: ['css-loader', 'less-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192, // 小于8k的图片自动转成base64花样，而且不会存在实体图片
                            outputPath: 'images' // 图片输出途径
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'],
            hash: true
        }),
        styleCss,
        styleLess
    ],
    mode: 'development'
}

款式style.css代码：

/* style.css */
@charset "utf-8";

.logo {
    display: block;
    width: 222px;
    height: 222px;
    background: url(../images/logo.png) no-repeat; // 这里的logo.png大小大于8K,以下天生在dist文件夹下images目次
}
.color-red {
    color: #f00;
}

在css中指定了publicPath途径如许就可以够依据相对途径援用到图片资本了，以下图所示

《webpack4初进修》

实行npm run dev 天生目次构造：

《webpack4初进修》

11、js文件引入图片

url-loader能自动识别CSS代码中的图片途径并将其打包至指定目次，然则JS就差别了，我们来看下面的例子。

// index.js
var img = new Image();
img.src = './images/logo.png';
document.body.appendChild(img);

如果不运用Webpack打包，一般状况下只需途径准确图片是可以一般显现的。但是，当运用Webpack打包后，我们会发明图片并未被胜利打包到dist目次，天然图片也没法显现出来。
这实在是由于Webpack并不晓得’../images/logo.png’是一张图片，如果要一般打包的话须要先将图片资本加载进来，然后再将其作为图片途径增加至图片对象。详细代码以下：

// index.js
import imgUrl from './images/logo.png' // 引入图片（途径），如果小于8K花样为base64，大于8K为设置途径dist目次下'./images/logo.png'

const img = new Image() // 实例一个图片对象
img.src = imgUrl;
document.body.appendChild(img); // 增加到dom节点中

完全index.js文件：

import './css/style.css'
import './less/style.less'
import imgUrl from './images/logo.png' // 引入图片

const img = new Image()
img.src = imgUrl
document.body.appendChild(img)
// document.write(imgUrl) // './images/logo.png'

document.write('<h1 class="logo"></h1></h1><h1 class="color-red">Hello webpack!</h1><h2 class="color-blue">测试第二个css款式是不是引入</h2>')

完全webpack.config.js设置文件（比拟第10部份无任何变化）：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

// 款式处置惩罚
const styleCss = new ExtractTextWebpackPlugin('./css/style.css')
const styleLess = new ExtractTextWebpackPlugin('./css/style2.css')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: styleCss.extract({
                    use: 'css-loader',
                    publicPath: '../' // 款式依据相对途径援用到图片资本
                })
            },
            {
                test: /\.less$/,
                use: styleLess.extract({
                    use: ['css-loader', 'less-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            outputPath: 'images', // 图片输出途径
                            name: '[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'], // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'], // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        styleCss,
        styleLess
    ],
    mode: 'development'
}

实行npm run dev天生文件目次

《webpack4初进修》

天生静态文件

《webpack4初进修》
可见图片在js中一般加载到页面中，由于logo.png大于8K，被打包到dist文件目次的images文件中。如果图片小于8K，则以base64编码花样写入页面进项衬着。

《webpack4初进修》

12、html页面引入图片

页面中经常会用到img标签，img援用的图片地点也须要一个loader来举行处置惩罚

npm i html-withimg-loader -D

完全wabpack.config.js设置：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

// 款式处置惩罚
const styleCss = new ExtractTextWebpackPlugin('./css/style.css')
const styleLess = new ExtractTextWebpackPlugin('./css/style2.css')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: styleCss.extract({
                    use: 'css-loader',
                    publicPath: '../' // 款式依据相对途径援用到图片资本
                })
            },
            {
                test: /\.less$/,
                use: styleLess.extract({
                    use: ['css-loader', 'less-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            outputPath: 'images', // 图片输出途径
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader' // 引入html-withimg-loader
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'], // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'], // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        styleCss,
        styleLess
    ],
    mode: 'development'
}

打包后天生对应目次：

《webpack4初进修》

13、引入字体图片和SVG图片

字体图标和svg图片都可以经由过程file-loader来剖析，在第11部份已举行装置。
webpack.config.js引入loader

module.exports = {
    module: {
        rules: [
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'iconfont' // 打包到指定文件夹
                        }
                    }
                ]
            }
        ]
    }
}

如许纵然款式中引入了这类花样的图标或许图片都没有题目了，img如果也援用svg花样的话，合营上面写好的html-withimg-loader就都没有题目了。

在index.js引入款式：

import './css/style.css'
import './less/style.less'
import './iconfont/iconfont.css' // 引入字体图片
import imgUrl from './images/pic.jpg' // 引入图片链接

const img = new Image()
img.src = imgUrl
document.body.appendChild(img)
// document.write(imgUrl) // './images/logo.png'

document.write('<h1 class="logo"></h1></h1><h1 class="color-red">Hello webpack!</h1><h2 class="color-blue">测试第二个css款式是不是引入</h2><br><span class="iconfont icon-gouwuche"></span>')

完全的webpack.config.js设置：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

// 款式处置惩罚
const styleCss = new ExtractTextWebpackPlugin('./css/style.css')
const styleLess = new ExtractTextWebpackPlugin('./css/style2.css')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: styleCss.extract({
                    use: 'css-loader',
                    publicPath: '../' // 款式依据相对途径援用到图片资本
                })
            },
            {
                test: /\.less$/,
                use: styleLess.extract({
                    use: ['css-loader', 'less-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            outputPath: 'images', // 图片输出途径
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'iconfont' // 打包到指定文件夹
                        }
                    }
                ]
            },
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader' // 引入html-withimg-loader,将图片转化为base64图片
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'],
            hash: true
        }),
        styleCss,
        styleLess
    ],
    mode: 'development'
}

打包后目次文件：

《webpack4初进修》

对应静态文件

《webpack4初进修》

14、增加CSS3前缀

经由过程postcss中的autoprefixer可以完成将CSS3中的一些须要兼容写法的属性增加相应的前缀，如许省去我们不少的时候

npm i postcss-loader autoprefixer -D // 装置postcss-loader 和 autoprefixer

装置后，我们还须要像webpack一样写一个config的设置文件，在项目根目次下建立一个postcss.config.js文件，设置以下：

const Autoprefixer = require('autoprefixer')

module.exports = {
    plugins : [
        Autoprefixer
    ]
}

《webpack4初进修》

然后在webpack里设置postcss-loader,webapack.config.js完全代码：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')

// 款式处置惩罚
const styleCss = new ExtractTextWebpackPlugin('./css/style.css')
const styleLess = new ExtractTextWebpackPlugin('./css/style2.css')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: styleCss.extract({
                    use: ['css-loader', 'postcss-loader'], // 设置postcss-loader
                    fallback: 'style-loader',
                    publicPath: '../'
                })
            },
            {
                test: /\.less$/,
                use: styleLess.extract({
                    use: ['css-loader', 'less-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            outputPath: 'images',
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'iconfont'
                        }
                    }
                ]
            },
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'],
            hash: true
        }),
        styleCss,
        styleLess
    ],
    mode: 'development'
}

index.js增加测试元素

《webpack4初进修》

款式表style.css，简朴书写了animation动画结果，没有增加兼容浏览器的前缀

/* style.css */
@charset "utf-8";

.logo {
    display: block;
    width: 222px;
    height: 222px;
    background: url(../images/logo.png) no-repeat;
}
.color-red {
    color: #f00;
}
.test-css3 {
    position: absolute;
    left: 500px;
    top: 0;
    width: 100px;
    height: 100px;
    background-color: #f00;
    animation: myfirst 5s linear 2s infinite alternate running;
}
@keyframes myfirst {
    0% {
        background: #f00;
        left: 500px;
        top: 0;
    }
    25% {
        background: #ff0;
        left: 900px;
        top: 0;
    }
    50% {
        background: #f0f;
        left: 900px;
        top: 400px;
    }
    75% {
        background: #000;
        left: 500px;
        top: 400px;
    }
    100% {
        background: #0f0;
        left: 500px;
        top: 0;
    }
}

实行npm run dev 后天生的style.css代码自动增加了-webkit-前缀

《webpack4初进修》

15、转义ES6

在现实开辟中，我们在大批的运用着ES6及以后的api去写代码，如许会进步我们写代码的速率，不过由于低版本浏览器的存在，不得不须要转换成兼容的代码，因而就有了经常使用的Babel。
bable可以将ES6代码转义ES5代码，装置以下：

npm i babel-core babel-loader babel-preset-env babel-preset-stage-0 -D

babel兼容ES6和草案api，经由过程一个.babelrc文件来设置一下，对这些版本的支撑

// .babelrc
{
    "presets": ["env", "stage-0"]   // 从右向左剖析
}

我们再在webpack里设置一下babel-loader既可以做到代码转成ES5了

module.exports = {
    module: {
        rules: [
            {
                test:/\.js$/,
                use: 'babel-loader',
                include: /src/,          // 只转化src目次下的js
                exclude: /node_modules/  // 排撤除node_modules，优化打包速率
            }
        ]
    }
}

增加本部份设置，完全wabpack.config.js代码：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

// 款式处置惩罚
const styleCss = new ExtractTextWebpackPlugin('./css/style.css')
const styleLess = new ExtractTextWebpackPlugin('./css/style2.css')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: styleCss.extract({
                    use: ['css-loader', 'postcss-loader'],
                    fallback: 'style-loader',
                    publicPath: '../' // 款式依据相对途径援用到图片资本
                })
            },
            {
                test: /\.less$/,
                use: styleLess.extract({
                    use: ['css-loader', 'less-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                include: '/src/',
                exclude: '/node_modules/'
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            outputPath: 'images', // 图片输出途径
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'iconfont' // 打包到指定文件夹
                        }
                    }
                ]
            },
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader' // 引入html-withimg-loader,将图片转化为base64图片
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            chunks: ['main'], // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            chunks: ['login'], // 对应关联,index.js对应的是index.html
            hash: true // 在html模板中自动增加？20位哈希值
        }),
        styleCss,
        styleLess,
        new CleanWebpackPlugin('dist')
    ],
    mode: 'development'
}

16、启动静态效劳器和热更新

A.启动静态效劳

启动一个静态效劳器，默许会自动革新，就是说你对html,css,js文件做了修正并保留后，浏览器会默许革新一次展示修正后的结果

module.exports = {
    devServer: {
        contentBase: './dist',
        host: 'localhost',      // 默许是localhost
        port: 8080,             // 端口
        open: true,             // 自动翻开浏览器
        // hot: true               // 开启热更新
    }
}

此时我们要对pakage.json文件举行修正：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production", 
    "dev": "webpack-dev-server --mode development --open" // 运用webpack-dev-server
  }

实行npm run dev 会自动翻开默许浏览器，翻开http://localhost:8080页面，html,css,js修正保留后页面会自动及时更新。
之前各部份我们每次实行npm run dev都邑在根目次天生静态文件目次dist,启动静态效劳器，天生dist会储存到内存当中，根目次下不再天生dist文件夹。

B.热更新
在设置devServer的时刻，如果hot为true，就代表开启了热更新

module.exports = {
    devServer: {
        contentBase: './dist',
        host: 'localhost',      // 默许是localhost
        port: 8080,             // 端口
        open: true,             // 自动翻开浏览器
        hot: true               // 开启热更新
    }
}

然则热更新是指定某个js文件的更新，只需在指定的js文件增加以下代码，示意本文件完成热更新，修正文件后手动革新页面，会看到修正后的内容；如果不增加以下代码，js文件照样自动革新

if (module.hot) {
    // 完成热更新
    module.hot.accept();
}

热更新和自动革新的区分:

  • js文件被检测到module.hot,就完成热更新，检测不到就是自动革新；
  • 热更新须要手动革新猎取修正后结果，自动革新是修正保留，页面自动更新。

完全webpack.config.js代码：

const path = require('path')
const webpack = require('webpack')  // 引入webpack
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

// 款式处置惩罚
const styleCss = new ExtractTextWebpackPlugin('./css/style.css')
const styleLess = new ExtractTextWebpackPlugin('./css/style2.css')

module.exports = {
    entry: {
        main: './src/index.js',
        login: './src/login.js'
    },
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: styleCss.extract({
                    use: ['css-loader', 'postcss-loader'],
                    fallback: 'style-loader',
                    publicPath: '../'
                })
            },
            {
                test: /\.less$/,
                use: styleLess.extract({
                    use: ['css-loader', 'less-loader'],
                    fallback: 'style-loader'
                })
            },
            {
                test: /\.js$/,
                use: 'babel-loader',
                include: '/src/',
                exclude: '/node_modules/'
            },
            {
                test: /\.(jpe?g|png|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            outputPath: 'images',
                            name: '[name].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.(eot|ttf|woff|svg)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            outputPath: 'iconfont'
                        }
                    }
                ]
            },
            {
                test: /\.(htm|html)$/,
                use: 'html-withimg-loader'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            title: '首页测试',
            chunks: ['main'],
            hash: true
        }),
        new HtmlWebpackPlugin({
            template: './src/login.html',
            filename: 'login.html',
            title: '登录页测试',
            chunks: ['login'],
            hash: true
        }),
        styleCss,
        styleLess,
        new CleanWebpackPlugin('dist'),
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        host: 'localhost',
        port: 8080,
        open: true,
        hot: true // 完成页面热更新
    },
    resolve: {
        extensions: ['.js', '.json', '.css']
    },
    mode: 'development'
}

index.js文件代码：

import './css/style.css'
import './less/style.less'
import './iconfont/iconfont.css'
import imgUrl from './images/pic.jpg' // 引入图片

const img = new Image()
img.src = imgUrl
document.body.appendChild(img)
// document.write(imgUrl) // './images/logo.png'

document.write('<h1 class="logo"></h1></h1><h1 class="color-red">Hello webpack!</h1><h2 class="color-blue">测试第二个css款式是不是引入</h2><br><span class="iconfont icon-gouwuche"></span><span class="iconfont icon-new"></span><div class="test-css3"></div>')

if (module.hot) {
    module.hot.accept()
}

17、resolve剖析

在webpack的设置中，resolve我们经常使用来设置别号和省略后缀名

module.exports = {
    resolve: {
        // 别号
        alias: {
            $: './src/jquery.js'
        },
        // 省略后缀
        extensions: ['.js', '.json', '.css']
    },
}

未完待续

参考链接：
1、https://juejin.im/post/5adea0…
2、https://www.cnblogs.com/cisum…
3、https://www.cnblogs.com/golov…
4、https://www.webpackjs.com/loa…
5、https://www.cnblogs.com/golov…

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