webpack的配置和安装（2）

时间  2020-12-08
标签 javascript css html java node webpack es6 web npm json 栏目 JavaScript 繁體版
原文   原文链接

上一篇文章讲述了如何安装和配置webpack的基础依赖，能够看连接描述javascript

这篇文章咱们来看看如何配置webpack最重要的配置文件webpack.config.jscss

首先咱们先在根目录下新建一个webpack.config.js,而后开始配置
首先咱们须要写一个moudle.exports={},咱们全部的配置项都须要在这里面配置，包括entry（文件入口），output（文件出口），module（里面配置一些loader）等等
具体代码以下html

module.exports = {
    entry:'./src/js/index.js',//入口文件
    output:{
        filename:'layer.js',    //输出的文件名
        path : __dirname + '/dist'    //输出文件路径
    },
}

其中entry是咱们要打包的js文件，output是咱们打包以后的js文件，filename是打包后的文件名，path是咱们的输出路径，其中__dirname 表示当前路径。
好了，咱们在src（和webpack.config.js以及package.json同级）目录下建立一个js文件夹，而后在其中新建一个index.js，里面随便写上一点什么，在这里我是写了一个alert，而后咱们执行打包操做
在命令行中进入当前项目的路径，而后输入java

webpack --mode development

在4.0版本以前咱们可使用webpack来执行打包，可是在4.0以后，webpack分红了开发环境和生产环境，webpack --mode development表示的开发环境下的打包， webpack --mode production表示是在实际项目上线时执行的打包。
那么咱们打包以后的结果以下图：node

clipboard.png
打包成功，而后咱们发如今根目录下出现了一个dist文件夹，而且里面出现了一个打包好的layer.js文件。
而后咱们新建一个layer.html文件，引入打包好后的layer.js，发现能达到和index.js同样的效果
代码以下：
layer.html:webpack

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="dist/layer.js" ></script>
    </body>
</html>

index.jses6

alert('webpack');

这代表咱们能够正常打包了。web

强大的webapck loader功能
光是js的打包并不能知足咱们的要求，咱们在实际开发中也须要引用和打包一些其余的文件，好比less，sass，css，图片等等，因此咱们须要配置一些loader来完成这些文件的打包。npm

首先咱们先来看看js的loader吧，如今不少js都是用es6来写的，咱们须要用webpack使他变成浏览器能识别的es5代码。
首先咱们须要在项目根目录下安装一个babel-loader,经过这个包将es6代码转换为es5代码json

npm install babel-loader --save-dev
npm install babel --save-dev
npm install babel-core --save-dev

而后咱们在webpack.config.js新增一个module，而后在里面配置babel-loader，代码以下：

module.exports = {
    entry:'./src/js/index.js',//入口文件
    output:{
        filename:'layer.js',    //输出的文件名
        path : __dirname + '/dist'    //输出文件路径
    },
    module:{
        rules:[
            {
                test:/.js$/, 
                use:[
                    {loader:'babel-loader'}
                ]
            }
        ]
    },
}

在这之中我使用了webapck4的use来导入loader，固然也可使用webpack4如下的loaders来导入loader，webpack4对于这两种导入方式都支持。
而后咱们打包一下就能够将es6的代码转换成浏览器能够识别的es5代码了

接下来是比较重要的css-loader了，这个咱们须要下的包就有些多了
下面是须要安装的包，咱们一次性安装无缺了

npm install css-loader style-loader postcss-loader autoprefixer --save-dev

而后咱们在rules里面进行配置
代码以下:

module.exports = {
    entry:'./src/js/index.js',//入口文件
    output:{
        filename:'layer.js',    //输出的文件名
        path : __dirname + '/dist'    //输出文件路径
    },
    module:{
        rules:[
            {
                test:/.js$/, 
                use:[
                    {loader:'babel-loader'}
                ]
            },
            {
                test: /.css$/,
                use: [
                    {loader:'style-loader'}, 
                    {loader:'css-loader',
                    options: {
                        importLoaders: 1
                      }
                    },
                    {loader:'postcss-loader',
                        options:{// 若是没有options这个选项将会报错 No PostCSS Config found
                            plugins:(loader) => [
                                require('autoprefixer')(
                                    {broswers:['last 5 versions']}
                                ), //CSS浏览器兼容
                            ]
                        }
                    }
                ]
            }/*解析css, 并把css添加到html的style标签里*/
        ]
    },
}

其中css-loader是解析css文件的，style-loader是将css文件经过style的方式去引入，在css-loader中咱们经过options给css-loader额外配置了一个importLoaders参数，这个参数表示在css-loader以后指定几个数量的loader来处理import进来的资源，这里设定为1。
postcss是用来作css浏览器兼容的，这个loader必需要配置options，不然在打包的时候就会报错No PostCSS Config found，在这个options中咱们引用了以前安装的autoprefixer，这个是用来自动匹配浏览器来补全前缀的，而后咱们设置为最近五个浏览器版本。注意这些loader的排序方式不能改变，必须是style-loader在css-loader以前，css-loader在postcss-loader以前，这是由于webpack的数组是从后往前解析的。
而后咱们在src文件夹下面创建一个css文件夹，在里面创建layer.css文件，写一些样式进去，而后在index.js文件中，经过commonjs的方式去引入这个css文件，具体代码以下
layer.css

.test1{
    width: 100px;
    height: 100px;
    background: blue;
}

index.js

require('../css/layer.css');

const a = "webapck";
alert(a);

打包以后，运行效果如图所示

clipboard.png
代表咱们的css文件也成功打包了

接下来是图片的解析，咱们也须要安装一些loader，代码以下：

npm install  url-loader file-loader --save-dev

一样的咱们须要在rules中去配置这个loader，具体配置代码以下：

{
    test: /.(jpg|png|gif|svg)$/, 
    use: [
        {
            loader:'url-loader',
                        options:{
                            limit: 500,//图片小于500的话就把图片转为base64格式
                outputPath: 'assets/images/',
                name: '[hash].[ext]',
                        }
        }
    ]
}

在这个配置中咱们能够识别以jpg,png,gif,svg为后缀名的图片，而且将他们打包，在webpack4中，咱们用了功能更为强大的url-loader去代替了file-loader（url-loader中内置了file-loader的功能），而且咱们配置了一系列的options，下面就挨个来解释这些配置项的用途。
limit是对于图片大小的判断，低于咱们给定的数就会被转换成base64的格式，单位是字节。
output则是图片打包后的保存路径，name是文件打包后的名字，在这里我用了[hash]，这会使文件打包事后的名字是一串哈希值
配置完成以后咱们来试验一番吧。
首先咱们先在src文件夹中建立一个img用来放置待打包的图片，而后在css中去引用这些图片，
而后运行看看是否正常打包
代码以下
layer.css

.test1{
    width: 100px;
    height: 100px;
    background: blue;
}
.test2{
    width: 100px;
    height: 100px;
    background-image: url(../img/1.jpg);
}

咱们发如今dist目录下生成了一个新的asset目录，里面就是咱们打包的图片，而layer.html也能看到打包正常，可是图片确没有正常被引用，以下图所示
clipboard.png

彷佛图片的路径出了点问题，这是由于图片是静态资源，加载静态资源咱们须要在output中配置一个名为publicPath的参数来正确的加载路径
具体代码以下

output:{
        filename:'layer.js',    //输出的文件名
        publicPath:'./dist/',
        path : __dirname + '/dist'    //输出文件路径
    }

在配置完publicPath以后，咱们再次执行打包命令，而后看看layer.html，效果如图

clipboard.png

图片的加载路径正确了，背景图也展示出来了。说明咱们的配置是正确的

彷佛忘了什么？如今样式文件不光有css，还有less和sass，这两个文件的打包也是须要loader的，因此咱们来配置这两个文件的打包吧
老规矩，先安装loader

npm install less sass less-loader sass-loader --save-dev

配置能够和cssloader的配置同样，不过咱们须要注意一下须要修改一下识别的文件，分别是sass和less，具体配置以下

{
                    test: /.less$/,
                    use: [
                    {loader:'style-loader'}, 
                    {loader:'css-loader',
                        options: {
                            importLoaders: 1
                          }
                    },
                    {loader:'postcss-loader',
                        options:{// 若是没有options这个选项将会报错 No PostCSS Config found
                            plugins:(loader) => [
                                require('autoprefixer')(
                                    {broswers:['last 5 versions']}
                                ), //CSS浏览器兼容
                            ]
                        }
                    },
                    {loader:'less-loader'}
                    ]
                },/*解析less, 把less解析成浏览器能够识别的css语言*/
                {
                    test: /.sass$/,
                    use: [
                    {loader:'style-loader'}, 
                    {loader:'css-loader',
                        options: {
                            importLoaders: 1
                          }
                    },
                    {loader:'postcss-loader',
                        options:{// 若是没有options这个选项将会报错 No PostCSS Config found
                            plugins:(loader) => [
                                require('autoprefixer')(
                                    {broswers:['last 5 versions']}
                                ), //CSS浏览器兼容
                            ]
                        }
                    },
                    {loader:'sass-loader'}
                    ]
                }/*解析sass, 把sass解析成浏览器能够识别的css语言*/

配置完这个以后咱们也能够打包less和sass文件了

有些时候咱们须要在html文件中引入html文件，这种状况下咱们就须要导入html-loader

npm install html-loader --save-dev

配置以下

{
    test: /.html$/, 
    use: [
        {loader:'html-loader'}
    ]
    }

配置完了咱们就能够打包html文件了

最终webpack.config.js的代码以下

module.exports = {
    entry:'./src/js/index.js',//入口文件
    output:{
        filename:'layer.js',    //输出的文件名
        publicPath:'./dist/',
        path : __dirname + '/dist'    //输出文件路径
    },
    module:{
        rules:[
            {
                test:/.js$/, 
                use:[
                    {loader:'babel-loader'}
                ]
            },
            {
                test: /.css$/,
                use: [
                    {loader:'style-loader'}, 
                    {loader:'css-loader',
                    options: {
                        importLoaders: 1
                      }
                    },
                    {loader:'postcss-loader',
                        options:{// 若是没有options这个选项将会报错 No PostCSS Config found
                            plugins:(loader) => [
                                require('autoprefixer')(
                                    {broswers:['last 5 versions']}
                                ), //CSS浏览器兼容
                            ]
                        }
                    }
                ]
            },/*解析css, 并把css添加到html的style标签里*/
            {
                test: /.(jpg|png|gif|svg)$/, 
                use: [
                    {
                        loader:'url-loader',
                        options:{
                            limit: 500,//图片小于500的话就把图片转为base64格式
                            outputPath: 'assets/images/',
                            name: '[hash].[ext]',
                        }
                    }
                ]
           },
           {
                test: /.less$/,
                use: [
                {loader:'style-loader'}, 
                {loader:'css-loader',
                    options: {
                        importLoaders: 1
                      }
                },
                {loader:'postcss-loader',
                    options:{// 若是没有options这个选项将会报错 No PostCSS Config found
                        plugins:(loader) => [
                            require('autoprefixer')(
                                {broswers:['last 5 versions']}
                            ), //CSS浏览器兼容
                        ]
                    }
                },
                {loader:'less-loader'}
                ]
            },/*解析less, 把less解析成浏览器能够识别的css语言*/
            {
                test: /.sass$/,
                use: [
                {loader:'style-loader'}, 
                {loader:'css-loader',
                    options: {
                        importLoaders: 1
                      }
                },
                {loader:'postcss-loader',
                    options:{// 若是没有options这个选项将会报错 No PostCSS Config found
                        plugins:(loader) => [
                            require('autoprefixer')(
                                {broswers:['last 5 versions']}
                            ), //CSS浏览器兼容
                        ]
                    }
                },
                {loader:'sass-loader'}
                ]
            },/*解析sass, 把sass解析成浏览器能够识别的css语言*/
            {
                test: /.html$/, 
                use: [
                    {loader:'html-loader'}
                ]
            }
        ]
    },
}

上面讲的是打包一个js文件的状况，在实际的开发应用中咱们的js文件显然不止一个，这时候咱们须要多个入口文件来执行打包，有如下两种方式可供你们选择
1、以一个数组的方式来做为文件的入口
代码以下

entry:['./src/js/index.js','./src/js/index2.js'],//入口文件
output:{
        filename:'layer.js',    //输出的文件名
        publicPath:'./dist/',
        path : __dirname + '/dist'    //输出文件路径
    },

这时候index.js和index2.js会被一块儿打包到layer.js中，咱们在index2.js中打印一个123，打包以后查看layer.js，发现打包事后的文件已经打包完成了这两个文件，如图所示

clipboard.png

2、以一个对象做为入口的文件
代码以下

entry:{
        a:'./src/js/index.js',
        b:'./src/js/index2.js'
        },//入口文件
    output:{
        filename:'layer.js',    //输出的文件名
        publicPath:'./dist/',
        path : __dirname + '/dist'    //输出文件路径
    },

这个时间咱们执行打包，发现咱们只能打包其中一个js，另外一个js并不能被打包进来，
以下图所示

clipboard.png
咱们只有一个chunk值，官网也说这种状况下，咱们在output这个出口文件下也须要从新配置一下，咱们的filename再也不是一个固定的文件名了，而应该是 '[name].js'，这样咱们打包的时候，就会自动根据对象的属性名生成对应的文件，有几个对象就会生成几个打包对象，那么就让咱们打包一下看看吧。

这是咱们的打包结果，看来是打包成功了，而且生成了a和b两个js文件clipboard.png
咱们在layer.html中引入这两个js，发现和以前的layer.js是同样的效果。

你觉得这样就完结了吗，并无，以前咱们打包完成以后仍是须要手动去引入打包事后的js，这种方法无疑是极为很差的，webpack为咱们提供了一个插件，来解决这个问题。
首先咱们须要安装这个插件

npm install html-loader html-webpack-plugin --save-dev

安装好了以后，咱们在webpack.config中去引用这个插件

const htmlWebpackPlugin = require('html-webpack-plugin');

而且在module.exports中新增一个plugins配置项

plugins:[
            new htmlWebpackPlugin({
                template:'layer.html',
                filename:'layer.html',
            })
        ]

这时候咱们执行打包操做，运行结果以下

clipboard.png
咱们打包了图片，两个js文件和layer.html这个文件，而后咱们发现dist目录下也多了一个layer.html，这个html自动引入了咱们打包完成以后的js

clipboard.png
代表咱们打包成功，之后也不须要担忧去手动引用打包以后的js的问题了。

接下来咱们关注一下公共模块的打包，在实际项目中，咱们是有不少个js文件的，这些js文件或多或少有一些公共的模块，webpack能够将其分离出来
首先咱们须要在项目中再次安装一次webpack，由于咱们须要使用webpack的一些插件
在webpack4以前的版本中，打包公共模块是用以下的方式

var CommonsChunkPlugin = new webpack.optimize.CommonsChunkPlugin('common');
//把公共模块提取出来, 并取名为'common'(名字自起), webpack以后再out文件夹下生成common.js, 测试时记得引入提取出来的公共模块js文件

而后在plugins配置中增长一个CommonsChunkPlugin 值就能够了。
可是在webpack4，这种方法已经不能使用了，webpack给咱们提供了一种新的方式去提取公共文件使用spiltchunk来代替commonschunkplugin
具体配置以下

新增一个optimization配置项，和plugins同级，

optimization: {
            runtimeChunk: {
                name: "manifest"
            },
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendor",
                        chunks: "all"
                    }
                }
            }
        },

执行打包

clipboard.png
打包成功，咱们发现dist文件夹下面多了一个manifest.js，这个js中放的就是a和b的公共模块

接下来咱们来使用webpack服务器，
首先在项目目录中安装

npm install webpack-dev-server

在webapck4中，咱们能够经过一个devServer的配置项来修改webpack服务器的内容

devServer: {
            contentBase: path.join(__dirname, "src/dist"),
            host: 'localhost',
            port:8496,
            compress: true//是否压缩
        },

host和port共同组成了咱们的网络路径，port是端口号，这个端口号是能够修改的，而后咱们须要引入一个新的插件path

const path = require('path');

咱们经过path的join方法来肯定路径，同时咱们能够修改一下output的path，使其变为

path :  path.resolve(__dirname , '/dist')    //输出文件路径

而后咱们执行

webpack-dev-server --mode development

（可能须要在项目中从新安装一次webpack-cli）
运行结果以下图所示

clipboard.png

三行信息代表咱们的路径
编译成功，项目已经成功发布到8496的端口去了
咱们可使用^C来终止该命令

webpack还有一些其余的插件命令可使用，如

webpack.optimize.UglifyJsPlugin({minimize: true});//代码压缩//只支持es5
require("extract-text-webpack-plugin");
//将css独立引入变成link标签形式, 使用该插件须要独立下载'npm install extract-text-webpack-plugin --save-dev', 同时下面的rules也必须更改

这里就不一一赘述了

最后附上个人webpack.config.js的配置

const htmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
    entry:{
        a:'./src/js/index.js',
        b:'./src/js/index2.js'
        },//入口文件
    output:{
        filename:'[name].js',    //输出的文件名
        publicPath:'./dist/',
        path :  path.resolve(__dirname , '/dist')    //输出文件路径
    },
     devServer: {
            contentBase: path.join(__dirname, "src/dist"),
            host: 'localhost',
            port:8496,
            compress: true
        },
    module:{
        rules:[
            {
                test:/.js$/, 
                use:[
                    {loader:'babel-loader'}
                ]
            },
            {
                test: /.css$/,
                use: [
                    {loader:'style-loader'}, 
                    {loader:'css-loader',
                    options: {
                        importLoaders: 1
                      }
                    },
                    {loader:'postcss-loader',
                        options:{// 若是没有options这个选项将会报错 No PostCSS Config found
                            plugins:(loader) => [
                                require('autoprefixer')(
                                    {broswers:['last 5 versions']}
                                ), //CSS浏览器兼容
                            ]
                        }
                    }
                ]
            },/*解析css, 并把css添加到html的style标签里*/
            {
                test: /.(jpg|png|gif|svg)$/, 
                use: [
                    {
                        loader:'url-loader',
                        options:{
                            limit: 500,//图片小于500的话就把图片转为base64格式
                            outputPath: 'assets/images/',
                            name: '[hash].[ext]',
                        }
                    }
                ]
           },
           {
                test: /.less$/,
                use: [
                {loader:'style-loader'}, 
                {loader:'css-loader',
                    options: {
                        importLoaders: 1
                      }
                },
                {loader:'postcss-loader',
                    options:{// 若是没有options这个选项将会报错 No PostCSS Config found
                        plugins:(loader) => [
                            require('autoprefixer')(
                                {broswers:['last 5 versions']}
                            ), //CSS浏览器兼容
                        ]
                    }
                },
                {loader:'less-loader'}
                ]
            },/*解析less, 把less解析成浏览器能够识别的css语言*/
            {
                test: /.sass$/,
                use: [
                {loader:'style-loader'}, 
                {loader:'css-loader',
                    options: {
                        importLoaders: 1
                      }
                },
                {loader:'postcss-loader',
                    options:{// 若是没有options这个选项将会报错 No PostCSS Config found
                        plugins:(loader) => [
                            require('autoprefixer')(
                                {broswers:['last 5 versions']}
                            ), //CSS浏览器兼容
                        ]
                    }
                },
                {loader:'sass-loader'}
                ]
            },/*解析sass, 把sass解析成浏览器能够识别的css语言*/
            {
                test: /.html$/, 
                use: [
                    {loader:'html-loader'}
                ]
            }
        ]
    },
     optimization: {
            runtimeChunk: {
                name: "manifest"
            },
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendor",
                        chunks: "all"
                    }
                }
            }
        },
    plugins:[
            new htmlWebpackPlugin({
                template:'layer.html',
                filename:'layer.html',
            })
        ]
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程