webpack打包学习

 

从上图我们可以看出，webpack 可以将多种静态资源 js、css、sass文件等转换成一个静态文件，以此可以减少页面的请求，从而提高浏览器响应速度

1.安装开发依赖包

npm install webpack webpack-cli -D

2.添加打包配置文件

webpack.config.js(执行打包命令时会默认执行)

const path = require('path');
module.exports = {
   //development：开发模式，production：生产(上线)模式
    mode: 'development',
    //打包文件的入口
    //单个文件
    entry: './src/index.js',
    //多个文件
    // entry: {
    //     index: './src/index.js',
    //     //other: './src/other.js'
    // },
    //打包文件的出口
    output: {
        //打包后的文件
        //单个文件
        filename: 'js/bundle.js',
        //多个文件
        //filename: 'js/[name].bundle.js',
        //打包后的文件所在目录，对于webpack命令有效；
        //而对于webpack-dev-server命令无效，其打包后存储在devServer开发服务器内存根目录下('/')，所以我们无法查看
        path: path.join(__dirname, './dist')
    },
};

3.打包命令

• 开发打包命令

npx webpack --watch(监听程序是否修改，若程序修改，自动重新打包)
或者
npm run dev (先在package.json文件的scripts选项添加 "dev":"webpack" 配置)
打包成功后，html文件就可以手动导入打包后所需的目标文件；
当然我们也可以事先安装好html-webpack-plugin插件，然后在webpack.config.js配置文件中设置相关配置，就不需要我们手动导入打包后的文件了，该插件可以帮助我们把打包后的文件自动注入到配置好的html文件中，该html文件也会在导出目录中自动创建。

• 生产(上线)打包命令

npx webpack -p(或者--production)
或者
npm run build (先在package.json文件的scripts选项添加 "build":"webpack -p" 配置)

4.devServer开发服务器(webpack自动打包工具)

安装开发依赖包：
    npm install webpack-dev-server -D
打包命令：
    npx webpack-dev-server
    (1)打包后的文件默认会存放在devServer开发服务器内存的根目录下('/'),在电脑硬盘上是无法查看的，不过当我们用浏览器访问开发服务器时，可在浏览器调试窗口下的源代码选项查看
    (2)打包成功后devServer开发服务器默认地址为：http://localhost:8080，当浏览器访问该地址时，默认会加载devSer开发服务器目录下的index.html文件，当然我们还应当安装html-webpack-plugin插件设置相关配置，才能自动生成index.html
    或者
    npm run start (先在package.json文件的scripts选项添加 "start":"webpack-dev-server --open --host 127.0.0.1 --port 8888" 配置)
    相关参数
    --open：自动打开浏览器
    --host：指定主机名
    --port：指定端口号

也可以在webpack.config.js文件设置devServer相关配置

const path = require('path');
module.exports = {
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 8888
        //设置devServer开发服务器静态资源目录
        //默认为项目的根目录(与package.json同路径)
        contentBase: path.join(__dirname, './')
    }
}

5.html页面预览插件(html-webpack-plugin)

npm i html-webpack-plugin -D

webpack.config.js文件相关配置

//html webpack打包成功后预览页面插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin = new HtmlWebpackPlugin({
    //设置打包成功后预览页面的模板
    template: './src/index.html', 
    //打包成功后，打包过后的文件会自动注入到模板文件中,设置最终生成的预览文件名
    filename: 'index.html', 
});
module.exports = {
    plugins: [htmlPlugin]
}

6.打包css相关文件

• 打包css文件

npm i css-loader style-loader postcss-loader autoprefixer -D

webpack.config.js文件相关配置

module.exports = {
    module: {
        //配置规则
        rules: [
            //加载css样式配置
            {
                //匹配的文件类型，以.css后缀
                test: /\.css$/,
                //加载器从右往左处理
                use: ['style-loader', 'css-loader', 'postcss-loader'] //postcss-loader用于自动添加前缀
            }
        ]
    }
}

postcss.config.js文件相关配置

//自动添加css前缀插件，配合postcss-loader使用
const autoprefixer = require('autoprefixer');
module.exports = {
    plugins: [
        autoprefixer
    ]
}

• 打包less文件

npm i css-loader style-loader less-loader less -D

webpack.config.js文件相关配置

module.exports = {
    module: {
        //配置规则
        rules: [
            //加载less样式配置
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'] //less-loader依赖less核心包
            }
        ]
    }
}

• 打包scss文件

scss是sass基于css3规范的一种。

npm i css-loader style-loader sass-loader node-sass -D

webpack.config.js文件相关配置

module.exports = {
    module: {
        //配置规则
        rules: [
            //加载scss样式配置
            {
                test: /\.scss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'] //sass-loader依赖node-sass核心包
            }
        ]
    }
}

7.打包图片/音频文件

npm i url-loader file-loader -D

webpack.config.js文件相关配置

module.exports = {
    module: {
        //配置规则
        rules: [
            //加载图片/字体配置
            {
                test: /\.(jpg|png|gif|bmp|eot|svg|woff|woff2)$/,
                //url-loader依赖file-loader核心包，图片小于16940字节，会转化成base64格式，超过则不会转化,name参数为图片打包路径
                //use: 'url-loader?limit=16940&name=images/[name].[ext]&esModule=false' 
                // 或者
                loader: 'url-loader',
                options: {
                    limit: 16940, //文件大小小于这个值，转为base64格式，超过保持原有格式
                    name: 'images/[name].[ext]', //文件大小超过限制时的存储路径，以及文件命名格式
                    esModule: false //src路径默认会解析成[object Module]，因此设置不解析成Module
                }
            },
            //加载音频文件配置
            {
                test: /\.(mp3)(\?.*)?$/,
                use: 'url-loader?name=audio/[name].[ext]&esModule=false' 
            }
        ]
    }
}

8.打包js文件(高级语法)

安装babel转换器相关包

npm i babel-loader @babel/core @babel/runtime -D

安装babel语法插件相关包

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

webpack.config.js文件相关配置

module.exports = {
    module: {
        //配置规则
        rules: [
            //加载高级js语法文件配置
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: [/node_modules/] //排除node_modules文件夹
            }
        ]
    }
}

babel.config.js文件相关配置

const presets = [
    ["@babel/preset-env",
        { //配置兼容的浏览器版本
            targets: {
                edge: "17",
                firefox: "60",
                chrome: "67",
                safari: "11.1"
            },
            //配合@bable/polyfill(可以模拟完整的ES6+环境)
            //假如参数值为"usage"，babel将检查你的所有代码，查找目标环境中缺失的功能，然后只把必须的polyfill包含进来
            //假如参数不是"usage"，将会把完整的polyfill包含进来
            useBuiltIns: "usage"
        }
    ]
];
module.exports = {
    //presets,
    presets: ['@babel/preset-env'], //不配置targets，将转换所有ES6+代码为ES5兼容，一般不这样做
    plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']
}

9.打包vue文件

npm i vue-loader vue-template-compiler -D

webpack.config.js文件相关配置

const { VueLoaderPlugin } = require('vue-loader');
module.exports = {
    plugins:[new VueLoaderPlugin()],
    module: {
        //配置规则
        rules: [
             //加载vue单文件组件配置
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
}

10.清理dist目录插件

每次打包构建项目时，会先清理dist目录，再打包构建项目

npm i clean-webpack-plugin -D

webpack.config.js文件相关配置

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
    plugins:[new CleanWebpackPlugin()],
}

关注知了堂学习平台：https://zhiliaotang.cn