webpack4（一）:基本配置、html和css的处理

2020-10-29 本文已影响0人姜治宇

1、安装webpack4

npm i webpack@4.44.2 webpack-cli@4.0.0 -D

默认安装完成后只有一个node_modules目录和package.json文件。

-S和-D参数的区别：

npm i xxx -S 等同于：

npm install xxx --save    //写入package.json的dependencies对象

npm i xxx -D 等同于：

npm install module_name --save-dev  //写入package.json的devDependencies对象

2、运行

npx webpack

运行webpack会寻找配置文件webpack.config.js，如果没有，就用默认配置，默认输出文件夹是dist，文件名是main.js，这些信息都是在内存中托管的。
npx可以寻找node_modules里面的webpack命令，我们也可以在package.json自定义命令：

{
  "scripts":{
    "build":"webpack --config webpack.config.js"
  },
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^4.0.0"
  },
  "dependencies": {
    "jquery": "^3.5.1"
  }
}

运行npm run build命令即可。

3、基础配置

let path = require('path'); //node的path模块
module.exports = {
    mode:'development',//模式，默认两种 production和development
    entry:'./src/index.js', //入口
    output:{
        filename:'bundle.js', //打包后的文件名，名字随便起
        path: path.resolve(__dirname,'build') // 必须是绝对路径
    }
}

我们在src目录下创建index.js文件：

let a= require('./a.js');
console.log(a);

//a.js:
export var str = 'test'

4、处理html文件（html-webpack-plugin）

webpack的基本配置可以满足js文件的打包输出，但这还远远不够，比如——html文件该如何处理呢？
打包后的html文件，我们希望可以去掉换行和空格等来减少体积，然后还需要在引入的js文件上加入hash防止文件缓存，而且每次打包后的js文件尽量也要加上hash防止nginx层面的文件缓存等等，这时我们需要安装另外的plugin插件来扩展webpack的功能。
处理html的插件叫html-webpack-plugin，我们先来安装一下它。

npm i html-webpack-plugin -D

然后在webpack配置文件使用它：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
module.exports = {
    mode:'production',//模式，默认两种 production和development
    entry:'./src/index.js', //入口
    output:{
        filename:'bundle.js', //打包后的文件名
        path: path.resolve(__dirname,'build') // 必须是绝对路径
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            minify:{
                removeAttributeQuotes:true, // 去掉引号
                collapseWhitespace:true, // 去掉空格
            },
            hash:true //加hash防止缓存
        })
    ]
}

在运行前打包前我们需要在src目录下新建一个index.html，这个文件不需引入index.js，因为我们在webpack里面已经配置了entry入口信息，系统会自动帮我们把打包后的入口js文件在html中引入。

5、处理css文件（css-loader、style-loader）

一般css文件，我们都是在html中直接引入使用的。但目前我们已经有了统一的index.js入口，如果能将css也作为模块在js中引用和打包输出该多好！
先在src目录下建一个style.css文件做测试：

body{
background:green;
}

然后在index.js引入：

let str = require('./a.js')
console.log(str)
require('./style.css')

如果直接运行webpack打包命令，会输出如下错误信息：

You may need an appropriate loader to handle this file type, 
currently no loaders are configured to process this file. 
See https://webpack.js.org/concepts#loaders

提示说没用合适的loader处理这种file（css文件），下面我们就要引入专门的loader来处理它。
安装css-loader和style-loader

cnpm i css-loader style-loader -D

这两个loader是分工明确的，css-loader负责css语法解析（比如@import）；style-loader负责将css插入到html的head标签里面。

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
module.exports = {
    mode:'production',//模式，默认两种 production和development
    entry:'./src/index.js', //入口
    output:{
        filename:'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
        path: path.resolve(__dirname,'build') // 必须是绝对路径
    },
    plugins:[ //配置插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html',
            minify:{
                removeAttributeQuotes:true, // 去掉引号
                collapseWhitespace:true, // 去掉空格
            },
            hash:true //加hash防止引用文件缓存
        })
    ],
    module: { 
//配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
        rules: [
            {test:/\.css$/,use:['style-loader','css-loader']} //test就是正则匹配，匹配到.css文件后，use就是用什么模块来处理它。
        ]

    }
}

如果我们在index.html里面也定义了一些样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background:pink;
        }

    </style>
</head>
<body>

</body>
</html>

如果我们希望这个背景色的优先级更高的话：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
module.exports = {
    mode: 'production',//模式，默认两种 production和development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true, // 去掉引号
                collapseWhitespace: true, // 去掉空格
            },
            hash: true //加hash防止引用文件缓存
        })
    ],
    module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
        rules: [
            {
                test: /\.css$/,
                use: [{
                    loader: 'style-loader', //loader可以传对象
                    options: {
                        insert: 'top' //将插入点调到最上面
                    }
                },
                    'css-loader'
                ]
            }
        ]

    }
}

6、抽离css（mini-css-extract-plugin）

按以上方式打包出来的index.html是这样的：

<!DOCTYPE html><html lang=en><head><meta charset=UTF-8><title>Title</title><style>body{
            background:green;
        }</style></head><body><script src=bundle.390d84fa.js?390d84fa7b18534e7793></script></body></html>

这种方式是直接将css写入了html里面，如果太多css样式的话会很不方便，我们还是喜欢用link引入的方式，这样就需借助另外的插件来处理了。
安装mini-css-extract-plugin插件：

cnpm i mini-css-extract-plugin -D

修改一下webpack的配置文件：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css
module.exports = {
    mode: 'production',//模式，默认两种 production和development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({ // 处理html插件
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true, // 去掉引号
                collapseWhitespace: true, // 去掉空格
            },
            hash: true //加hash防止引用文件缓存
        }),
        new MiniCssExtractPlugin({ // 抽离css插件
            filename: 'main.css',

        })

    ],
    module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
        rules: [
            {
                test: /\.css$/,
                use: [
                    // {
                    //     loader: 'style-loader', //loader可以传对象
                    //     options: {
                    //         insert: 'top' //将插入点调到最上面
                    //     }
                    // },
                    MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替
                    'css-loader'
                ]
            }
        ]

    }
}

7、css自动加前缀（postcss-loader autoprefixer）

我们在写css3时，经常会遇到不同浏览器的前缀问题，如果一个一个加是非常烦的，如何自动添加呢？
这就需要新增loader来帮我们处理了：

 cnpm i postcss-loader autoprefixer -D

这个autoprefixer在使用之前需创建一个配置文件。
postcss.config.css:

module.exports = {
  plugins:[
    require("autoprefixer")({
      overrideBrowserslist:[
        "defaults",
        "Android 4.1",
        "iOS 7.1",
        "Chrome>31",
        "ff>31",
        "ie>=8",
        "last 2 versions",
        ">0%"
      ]
    })
  ]
}

然后修改一下webpack配置文件：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    mode: 'production',//模式，默认两种 production和development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({ // 处理html插件
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true, // 去掉引号
                collapseWhitespace: true, // 去掉空格
            },
            hash: true //加hash防止引用文件缓存
        }),
        new MiniCssExtractPlugin({ // 抽离css插件
            filename: 'main.css',

        })

    ],
    module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
        rules: [
            {
                test: /\.css$/,
                use: [
                    // {
                    //     loader: 'style-loader', //loader可以传对象
                    //     options: {
                    //         insert: 'top' //将插入点调到最上面
                    //     }
                    // },
                    MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替
                    'css-loader',
                    'postcss-loader' //先处理前缀，然后再交给css-loader解析
                ]
            }
        ]

    }
}

我们修改style.css来做一下测试:

body{
    background:green;
    transform: rotate(90deg);
}

运行一下打包命令，看看打包出来的main.css是否有前缀：

body{
    background:green;
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
}

8、抽离的css如何优化？

我们发现，前面的配置打包出来的main.css并没有进行压缩处理，这个如何优化一下呢？
老办法，只能继续安装插件来解决。

cnpm i optimize-css-assets-webpack-plugin -D

然后是webpack配置文件：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin'); //处理html文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin');//抽离css

let OptimizeCss = require('optimize-css-assets-webpack-plugin'); // 优化抽离的css
module.exports = {
    mode: 'production',//模式，默认两种 production和development
    entry: './src/index.js', //入口
    output: {
        filename: 'bundle.[hash:8].js', //打包后的文件名加入哈希(:8表示哈希值的位数)，可以防止nginx缓存
        path: path.resolve(__dirname, 'build') // 必须是绝对路径
    },
    plugins: [ //配置插件
        new HtmlWebpackPlugin({ // 处理html插件
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true, // 去掉引号
                collapseWhitespace: true, // 去掉空格
            },
            hash: true //加hash防止引用文件缓存
        }),
        new MiniCssExtractPlugin({ // 抽离css插件
            filename: 'main.css',

        })

    ],
    module: { //配置loader
// css-loader处理@import语法的；
// 而style-loader负责将css插入html的head标签里面的
// 多个loader需要使用数组[]
// loader的顺序默认是从右向左执行
        rules: [
            {
                test: /\.css$/,
                use: [
                    // {
                    //     loader: 'style-loader', //loader可以传对象
                    //     options: {
                    //         insert: 'top' //将插入点调到最上面
                    //     }
                    // },
                    MiniCssExtractPlugin.loader,//去掉style-loader，以这个代替
                    'css-loader',
                    'postcss-loader'
                ]
            }
        ]

    },
    optimization:{ // 优化项
        minimizer:[

            new OptimizeCss()
        ]


    }
}

运行webpack命令后，css确实是压缩了，但js却没有压缩了，咋办呢？
没关系，我们可以引入uglifyjs-webpack-plugin插件来解决。

cnpm i uglifyjs-webpack-plugin -D