webpack4.X 随手使用教程，从入门到进坑

起步安装

npm i webpack --save-dev复制代码

打包

下面我们对main.js进行打包

main.js//

const a=function(){
    alert('hello webpack');
}复制代码

命令行打包输入（使用webapck4.0以上的需要安装webpack-cli环境）：

webpack main.js  ./dist/index.js

上面命令行中 main.js 为入口文件（即可需要打包的js文件） ./dist/index.js 为打包后输出的文件路径

CSS打包

在webpack打包css文件时候需要安装相应的loader，因为在webpack打包是默认没有解析css文件类型的，所以我们需要安装style-loader,css-loader。（css-loader负责解析和打包.css文件的内容，style-laoder负责将css-loader解析打包的内容注入到html中进行应用）

使用npm 进行loader的安装 

npm i style-loader css-loader --save-dev

我们修改main.js进行引入CSS文件的操作

main.js//

require('./style.css');

const a=function(){    alert('hello webpack');
}
复制代码

style.css//
html,body{
    padding:0;
    margin:0;
}
body{
    background:red;
}复制代码

进行命令行操作打包

webpack  main.js  ./dist/index.js  --module-bind 'css=style-loader!css-loader'

上面命令行中的 --module-bind 是webpack命令行参数，表示模块绑定某功能，'css=style-loader!css-loader' 表示为当打包的是css文件时候使用插件 css-loader和style-loader进行打包

wbepack的常用命令行参数

上面打包css中我们提到了webpack的命令行参数 --module-bind ,webapck中还有许多的命令行参数，这些参数命令行有益帮助我们对项目的优化和调试，下面我就列几个常用的命令行参数好了

--wacth 当文件发生改变时候自动进行打包

--progress  显示打包过（显示打包进度读条）

--display-modules 显示所有打包引用的模块，并且也会显示此模块是通过什么loader进行处理等详细数据

--display-reasons  显示所需打包的模块的原因

--config 文件名  修改webpack打包配置文件的指向

webpack配置文件webpack.config.js配置打包 

使用命令行打包很多类型文件和其他配置时候每次打包都非常麻烦，所以可以使用webpack的配置文件来设置好配置进行一键打包，不用每次都输入很长很长的命令行。

我们先在项目结构下创建一下文件目录，方便我们后面进行项目整理和打包

/scr/script/main.js

/dist/

首先我们在项目的根目录创建一个 webapck.config.js 的文件（打包配置文件）

webpack.config.js//

module.exports = {
    //使用的模式
    mode:"production",
    //1.打包入口文件参数
    entry:'./src/script/main.js',
    //2.打包后输出的文件目录和文件名
    output:{
        //目录
        path:__dirname+"/dist/",
        //相对path的路径文件名
        filename:"index.js"
    },
    //3.资源文件处理配置
    module:{}
    //4.插件参数
    plugins:{}
}复制代码

上面参数中：

mode: 指定打包的的模式进行代码优化，参数分别有三个：development (开发环境模式)， production（生产环境模式）  none (任何默认优化选项).

entry: 为打包入口文件的路径，输入值可以是字符串，数组字符串，json。什么情况下输入数组，json呢？请看下面解析

            string: 单个打包文件路径

            Array<string>: 将两个或多个平行不互依赖打包到一个块映射表中

            json: 打包多个文件并根据对应的值输出多个对应的文件。使用json打包多个文件需要修改 output的值

output:{                           
        path:__dirname+"/dist/",
        //[name]对应被打包的文件名，[chunhash]对应每次打包的哈希值,对版本管理非常有用
        filename:'[name].js' or '[hash].js' or  '[chunhash].js'
}复制代码

output: 是打包后输出文件的路径，传的参数是json格式数据，path键对应的值必须是绝对路径目录，所以我们用到了node中的语法 __dirname (当前文件的路径) 进行路径接拼,filename就是输出文件的相对于path的相对路径。

module: 对文件类型处理的模块参数

plugins: 调用的插件

好了，我们在命令行中运行一下webpack 就可以发现我们已经打包成功了

自动生成html文件插件。 html-webpack-Plugin

如果我们用chunhash为打包文件命名时候，每次打包的名字都不同手动去修改index的引入的文件名称非常大的麻烦。所以我们可以用自动生成html的文件让webpack在打包的生成html时候引入打包的js。 html-webpack-plugin

首先安装插件

npm i html-webpack-plugin --save-dev

修改webapck.config.js 中的plugins的内容

// 引入html-webpack-plugin插件
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {    
    mode:'development',    
    //打包入口文件参数
    entry:'./src/script/main.js',
    //打包后输出的文件目录和文件名    
    output:{        
        //目录        
        path:__dirname+"/dist/",        
        //文件名
        filename:"index.js"
    },
    // 资源文件处理配置
    module:{

    },
    // 插件调用
    plugins:[
        // 实例化插件
        new htmlWebpackPlugin(),
    ]
}复制代码

当我们需要指定生成html的内容样式时候可以进行对 html-webpack-plugin 传参，参数为json格。

plugins:[
        // 实例化插件
        new htmlWebpackPlugin({template：'temp.html'}),
    ]复制代码

参数中的

tmplate：是值相对根目录的模板html文件

html-webpack-plugin 的参数中可以指定多种属性，以下列几个常用满足开发场景使用的属性参数

template:string （可选）指定引用的模板文件

filename:string （可选）指定生成的html的文件名，默认index.html

inject:{Boolean\|String} （可选）把webpack打包的js文件放到指定标签中引入，默认放到body底部，当值为false时将不进行引入打包的文件

minifly:{Boolean\|Object} （可选）是否对生成html文件进行压缩，参数属性: collapseInlineTagWhitespace:true 压缩代码，removeComments:true 删除注释 

tiltel:string （可选） 注入到生成的html中，用模板语法进行调用, <%= htmlWebpackPlugin.options.titel%> 

chunks:Array<tring> 根据本次打包的chunk来指定实例生成html中引入的文件

excludeChunks:Array<string> 指定排除chunk本次打包文件不进行引入到html中

类似于后端嵌套html执行一样，<%=%>表示打印输出。

具体html-webpack-plugin的参数和用法可以参考官方文档 https://www.npmjs.com/package/html-webpack-plugin 

多页面应用打包 html-webpack-plugin

对于多页面应用打包html我们改怎么打包呢？其实很简单。下面我们来应用一下

在plugins中new多一个实例html-webpack-plugin，并且传入文件名参数指定不同的文件名。

plugins:[
      new htmlWebpackPlugin({template:"./index.html",filename:"index.html"}),
      new htmlWebpackPlugin({template:"./index.html",filename:"app2.html"}),
]
复制代码

运行命令 webpack 打包一下

自动打包生成了两个html文件。

但是，如果我们要引入两个或个不同的js，并且打包区分到不同的html中该怎么办呢，这样我们就需要在html-webpack-plugin中传入参数chunks即可

plugins:[
      new htmlWebpackPlugin({template:"./index.html",filename:"index.html",chunks:['main.js','a.js']}),
      new htmlWebpackPlugin({template:"./index.html",filename:"app2.html",chunks:['b.js']}),
]复制代码

运行webpack打包~

生成的index.html和app2.html所以引用的js已经区分引入各自的js啦。

publicPath 修改html引入文件的路径

webpack打包每次打包完是以绝对路径引入js文件的，如果我们放置的项目位置不在站点根目录的话会出现引入文件出错404，所以我们可以设置publicPath占位符对引入路径进行修改

在output中参数添加属性publicPath:

//打包后输出的文件目录和文件名
    output:{
        //目录
        path:__dirname+"/dist/",
        //文件名
        filename:"index.js",
        publicPath:"http://cdn.com/"
    },复制代码

webpack打包一下，我们会发现js引入的路径已经和之前的不一样了

如何处理资源文件

这里我们来学webpack最牛逼的东西，loader处理。可以对es6转es5，css前缀添加，图片压缩，创建组件等等功能。

首先，我们要改一下文件的目录和webpack.config.js配置方便我们后面的学习。

以app.js为入口文件引入viwe组件

//app.js
import viwe from "./components/viwe/index.js";
function hello(){
    console.log(viwe)
}
new hello();复制代码

下面我们对viwe组件文件的编写

component/viwe/index.js

//component/viwe/index.js
//引入html模板
import temp from './index.html';

function out(){
    return {
        name:'viwe',
        tmplate:temp
    }
}
//默认导出组件模块
export default out

复制代码

component/viwe/index.html

<div>
    <h1>hello,webpack</h1>
</div>复制代码

component/viwe/index.less

div{
    h1{
        color: red;
    }
}复制代码

文件编辑完了，我们来对webpack.config.js进行修改配置

// 引入html-webpack-plugin插件
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports = {
    mode:'development',
    //打包入口文件参数
    entry:"./src/app.js",
    //打包后输出的文件目录和文件名
    output:{
        //目录
        path:__dirname+"/dist/",
        //文件名
        filename:"[name].js",
    },
    // 文件处理参数
    module:{
    },
    // 插件调用
    plugins:[
        // 实例化插件
        new htmlWebpackPlugin({template:'index.html'})
    ]
}复制代码

好了，我们先打包一下看看会怎么样

我们会发现webpack报错了，模块出现错误，你应该使用对应的loader进行文件资源处理。

所以我们要进行loader使用了，首先我们基本了解一下loader的使用先

需要在webpack.config.js的module.rules中添加loader处理参数，以json的方式传入

参数中有test:的为正则匹配的文件类型，use:为调用的loader，可以传字符串或数组，传入数组的情况是需要使用多个loader对文件资源进行处理，并且进行的顺序为从右到左。如果需要对loader传参需要用到options:

// 文件处理参数
    module:{
        rules:[
            {
                test: /\.js$/,
                //如果需要使用多个loader进行处理，需要传入数组的方式，并且运行loader顺序为从右到左
                use: [
                        {
                            loader:'babel-loader',
                            //对loader传参
                            options:{
                                presets:['@babel/preset-env']
                            },
                        }
                    ],
                exclude:/node_modules/
            }
        ]
    },复制代码

参数详解：

test:  需要处理的文件类型，正则参数

use:string|Array  处理文件类型的loader，只调用一个loader并且不传参数时候使用字符串形式传入，需要传入参数到laoder使用json格式，需要调用多个loader进行文件处理时候需要json数组形式

exclude:  不进行资源处理的文件夹

babel的支持：ES6，ES7转换ES5或相对应兼容浏览器

es6和es7在现代大多数浏览器中还是不兼容的，所以我们要用babel来js进行转换es5，以便兼容各个浏览器。

npm安装babel npm install babel-loader @babel/core @babel/preset-env --save-dev

调用babel对js代码进行转换的方法有很多种，下面我举例两种简单调用方法好了。

对webpack.config.js配置文件中的module.rules添加babel调用并且传入插件调用参数

// 资源文件处理配置
    module:{
        rules:[
            // 调用babel
            {
               test: /\.js$/,
                use:
                     {
                        loader:'babel-loader',
                        // 传入参数
                        options:{
                            presets:['@babel/preset-env']
                        }
                    }
                ,
                // 排除不需要进行处理的文件夹
                exclude:/node_modules/
            }
        ]
    },复制代码

webpack运行一下打包，查看打包出来的js代码已经进行了转换

除了在module.rules属性配置外，我们还在项目根目录中创建一个.babelrc（官方推荐）对babel进行配置。

创建.babelrc对babel进行功能配置

{
    "presets": [
        [
            "@babel/preset-env",
        ]
    ]
}复制代码

我们把webpack.config.js出的传参删除掉运行一下webpack，查看打包出来的代码也已经给转换了。

css文件处理与添加自动添加前缀

下面我介绍如何在webpack.config.js中配置打包css文件和进行自动前缀添加处理，我们先创建一个css文件编写一个css3的样式如：display:flex;

在module.rules中添加多一个对象

// 处理css资源
            {
                test:/\.css$/,
                use:[
                    // 3.写入到html中
                    {loader:'style-loader'},
                    // 2.对css文件进行处理
                    {loader:'css-loader'}
                ]
            }复制代码

就这样就配置完啦，运行一下webpack打包可以看到improt的css也被打包进去了。

如何添加浏览器版本前缀

我们需要先按照 postcss-loader和post的插件 autoprefixer 。

npm安装 npm i postcss-loader autoprefixer --save-dev

安装完成后我们对上面的css资源处理属性添加多一个postcss-loader。

{
                test:/\.css$/,
                use:[
                    // 3.写入到html中
                    {loader:'style-loader'},
                    // 2.对css文件进行处理
                    {loader:'css-loader'},
                    // 1.先进行Postcss处理css文件添加前缀
                    {loader:'postcss-loader'}
                ]
            }复制代码

完成这一步，我们需要创建一个postcss的配置文件进行配置postcss的模式和插件，在项目根目录创建一个 postcss.config.js

module.exports={
    plugins:[
        require('autoprefixer'),
    ]
}复制代码

上面配置的意思为添加使用插件 autoprefixer

好了，基本配置我们都配完了，进行webpack打包。打开浏览器可以打包样式已经被添加前缀了。

如何指定需要添加的前缀的浏览器版本

在默认添加前缀中，autoprefixer为我们添加的前缀为当前浏览器版本第一版兼容前缀，那我们对应一些特殊的需要，需要添加各种浏览器的前缀和他们的历史版本兼容前缀，改怎么办呢？其实很简单，只需要在package.json中配置一下即可

打开根目录的package.json进行添加

"browserslist": [
    "last 5 version",
    "> 1%",
    "maintained node versions",
    "not dead"  
]复制代码

上面属性解释：

"last 5version" =>添加浏览器最后5个版本的兼容前缀

">1%" =>全球市场份额大于1%的浏览器

处理css文件中@import的特别情况

当我们在css文件@import 其他css文件时候会发现autoprefixer没有为引入的css文件进行添加前缀，这时候我们需要为css-loader传递一个参数 importLoaders:number，告知需要引入多少个loader来处理我们@improt进来的css文件

// 处理css资源
            {
                test:/\.css$/,
                use:[
                    // 3.写入到html中
                    {loader:'style-loader'},
                    // 2.对css文件进行处理
                    {loader:'css-loader',options:{improtLoaders:1}},
                    // 1.先进行Postcss处理css文件添加前缀
                    {loader:'postcss-loader'}
                ]
            }复制代码

这样我们打包就会自动为@import的css文件添加前缀了。

处理less或sass文件资源

处理less或sass文件非常简单，需要安装less 和less-loader 或sass 和sass-loader即可

首先我们先npm进行安装一下

npm i less less-loader --save-dev

在webpack.config.js配置文件中的module.rules添加多一个参数

            // 处理less资源            {                test:/\.less$/,                use:[                    // 3.写入到html中                    {loader:'style-loader'},                    // 2.对css文件进行处理                    {loader:'css-loader'},                    // 1.先进行Postcss处理css文件添加前缀                    {loader:'postcss-loader'},                    {loader:'less-loader'}                ]            }复制代码

运行wbepack打包一下，打包成功~

处理template模板

在项目中我们会对功能进行组件化，这时候template模板是必不可少的，处理template模板是依据我们使用的loader进行配置的，通常template当成字符串或函数引用的。下面我们对把template当成字符串引用的实例好了

npm安装html-loader  npm i html-loader --save-dev

我们创建一个temp.html

//temp.html

<div>
    <h1>hello,templatte</h1>
</div>复制代码

在入口文件main.js引入temp.html

//main.js
import temp from './temp.html';

const hello=(function(){
    function hello(x){
        document.getElementsByTagName('body')[0].innerHTML=x;
    }
    return hello;
})()
new hello(temp);
复制代码

完成基本引入，我们来对webpack.config.js的module.rules添加配置

// 处理template模板
       {
          test:/\.html/,
          use:'html-loader'
       }复制代码

webpack打包运行一下，我们会发现打包出来的html已经被加载我们的template模板了。

处理图片资源打包

如果我们在html或css、js中引入图片、svg资源直接进行打包的话会出现报错的情况，因为我们要安装相应的loader对资源文件进行处理，这里我们就用到了file-loader，url-loader

npm安装 npm i url-loader file-loader --save-dev

在webpack.config.js中的module.rules添加配置属性

{
    test:/.(jpg|png|gif|svg)$/,
    use:[
        {
            loader:'url-loader'
            //传参设置文件小于多少kb进行转化成流的bs64编码嵌入文件中
            options:{
                    //10KB
                    limit:10000
                }
        }
    ]
}复制代码

在上面的配置中

url-loader是对引入的图片资源进行转换成bs64编码的流嵌入到我们的css或html中，limit：number参数设置大于多少的图片进行转换。当文件资源大于设定的大小会交给file-loader进行处理，file-loader是对文件进行提取并且自动修改webpack打包出来的路径。

接下来我们运行webpack打包就不会出错，图片也引来进来~

如果我们有特殊的需求需要对图片资源进行打包时候压缩的话可以引用image-webpack-loader对资源进行压缩

npm 安装 npm i image-webpack-loader --save-dev

{
    test:/.(jpg|png|gif|svg)$/,
    use:[
        {
            loader:'url-loader'
            //传参设置文件小于多少kb进行转化成流的bs64编码嵌入文件中
            options:{
                    //10KB
                    limit:10000
                }
        }
        //调用image-webpack
        {loader:"image-webpack-loader"}
    ]
}复制代码

这样我们的webpack就会自动为我们的图片资源大小进行压缩打包了

---------------------------------------底线啦--------------------------------------------------

先写到这里吧，后续会更新

转载于:https://juejin.im/post/5bc0b8d0e51d451a3f4c57ac