01webpack4 快速上手

Posted 2021-03-05 LearningTogether

本文适合新手快速上手webpack4，只讲应用，也比较浅。

开启 webpack 之旅

一、简易配置

1、初始化项目

　　npm init

//packge.json 文件中
"scripts": {    
    "build": "webpack  --profile --progress --colors --display-error-details",    
    "dev": "webpack  --display-modules --profile --progress --colors --display-error-details"  
}, 
//color 输出结果带彩色，比如：会用红色显示耗时较长的步骤
//profile 输出性能数据，可以看到每一步的耗时
//progress 输出当前编译的进度，以百分比的形式呈现
//display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
//display-error-details 输出详细的错误信息

2、安装webpack

　　全局安装：npm install webpack -g
　　本地安装：npm install webpack webpack-cli -D

3、webpack核心概念

　　Entry：　入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
　　Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。
　　Chunk： 代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
　　Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
　　Plugin： 扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
　　Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

4、配置 webpack.config.js

let path = require(‘path‘);//node的模块
module.exports = {
    entry:‘./src/index.js‘,//入口文件
    output:{
        filename:‘build.js‘,//出口文件
        // 这个路径必须是绝对路径
        path: path.resolve(‘./dist‘)
    }, 
    devServer:{},// 开发服务器
    module:{}, // 模块配置
    plugins:[], // 插件的配置
    mode:‘development‘, // 可以更改模式
    resolve:{}, // 配置解析
}

　　到这里使用命令 npm run dev 或者 npm run build 即可打包 js 文件。

二、配置开发服务器

　　npm i webpack-dev-server –D

//webpack.config.js
devServer:{
    contentBase:path.resolve(__dirname,‘dist‘),// 配置开发服务运行时的文件根目录
    host:‘localhost‘,// 开发服务器监听的主机地址
    compress:true,   // 开发服务器是否启动gzip等压缩
    port:8080,       // 开发服务器监听的端口
    open:true         // 是否自动打开浏览器
}

//package.json
"scripts": {
    "dev": "webpack-dev-server --open --mode development "
}
//开启本地服务 npm run dev
//--mode development开发环境 或者--mode production生产环境

三、配置module

　　test：匹配处理文件的扩展名的正则表达式

　　use：loader名称，就是你要使用模块的名称

　　include/exclude:手动指定必须处理的文件夹或屏蔽不需要处理的文件夹

　　query：为loaders提供额外的设置选项

1、支持加载css文件

　　npm install style-loader css-loader -D

module: {
    rules:[
       {
            test:/.css$/,
            use:[‘style-loader‘,‘css-loader‘],
            include:path.join(__dirname,‘./src‘),
            exclude:/node_modules/
       }        
    ]
}
//注意：加载器的加载顺序为从右至左。即先用css-loader解析然后用style-loader将解析后的css文件添加到Head标签中。

2、支持图片

　　npm install file-loader url-loader html-withimg-loader -D

module: {
    rules:[ 
       {
            test: /.(png|jpg|gif|svg|bmp|eot|woff|woff2|ttf)$/,
            loader: {
                loader: ‘url-loader‘,
                options: {
                    limit: 5 * 1024,// 图片大小 > limit 使用file-loader, 反之使用url-loader
                    outputPath: ‘images/‘// 指定打包后的图片位置
                }
            }
        }
    ]
}

//usage - 手动添加图片：
let logo = require(‘./images/logo.png‘);
let img = new Image();
img.src = logo;
document.body.appendChild(img);

//usage - 在CSS中引入图片
.img-bg{
    background: url(./images/logo.png);
    width:173px;
    height:66px;
}

//usage - 在html中使用图片
{
    test:/.(html|html)$/,
    use:‘html-withimg-loader‘,
    include:path.join(__dirname,‘./src‘),
    exclude:/node_modules/
}

3、编译less 和 sass

　　npm install less less-loader node-sass sass-loader -D

//把编译好的代码放到head里面
module: {
    rules:[ 
        {
            test: /.css$/,
            loader: [‘style-loader‘, ‘css-loader‘]
        }, {
            test: /.less$/,
            loader: [‘style-loader‘, ‘css-loader‘]
        }, {
            test: /.scss$/,
            loader: [‘style-loader‘, ‘css-loader‘]
        }
    ]
}

4、处理css3属性前缀

　　npm install postcss-loader autoprefixer -D

//postcss.config.js 文件
module.exports = {
    plugins: [
        require(‘autoprefixer‘)
    ]
}

//把 post-laoder push 到css的loader数组中
module: {
    rules:[ 
        {
            test: /.css$/,
            loader: [‘style-loader‘, ‘css-loader‘, ‘postcss-loader‘]
        }, {
            test: /.less$/,
            loader: [‘style-loader‘, ‘css-loader‘, ‘less-loader‘]
        }, {
            test: /.scss$/,
            loader: [‘style-loader‘, ‘css-loader‘, ‘sass-loader‘]
        }
    ]
}

5、转义ES6/ES7/JSX

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

//创建 .babelrc 文件
{
    "presets": ["@babel/preset-env"],
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "corejs": 3
            }
        ]
    ]
}

module: {
    rules:[ 
        {
            test:/.jsx?$/,
            use: {
                loader: ‘babel-loader‘,
                options: {
                    presets: ["env","stage-0","react"]// env --> es6, stage-0 --> es7, react --> react
                }
            },
            include:path.join(__dirname,‘./src‘),
            exclude:/node_modules/
        }
    ]
}

四、配置plugins

1、自动产出html

　　npm install html-webpack-plugin -D

const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
plugins: [
    new HtmlWebpackPlugin({
        template: ‘./src/index.html‘,   // 指定产出的模板
        filename: ‘base.html‘,          // 产出的文件名
        chunks: [‘common‘, ‘base‘],     // 在产出的HTML文件里引入哪些代码块
        hash: true,                     // 名称是否哈希值
        title: ‘base‘,                  // 可以给模板设置变量名，在html模板中调用 htmlWebpackPlugin.options.title 可以使用
        minify: {                       // 对html文件进行压缩
            removeAttributeQuotes: true // 移除双引号
        }
    })
]

2、分离css

　　npm install extract-text-webpack-plugin@next -D

//把编译好的代码放到单独的文件里面
const ExtractTextWebpackPlugin = require(‘extract-text-webpack-plugin‘);
let cssExtract = new ExtractTextWebpackPlugin(‘css.css‘);
let lessExtract = new ExtractTextWebpackPlugin(‘less.css‘);
let sassExtract = new ExtractTextWebpackPlugin(‘sass.css‘);

module: {
    rules: [
         {
            test: /.css$/,
            loader: cssExtract.extract({
                use: [‘css-loader?minimize‘]
            })
        }, {
            test: /.less$/,
            loader: lessExtract.extract({
                use: [‘css-loader?minimize‘, ‘less-loader‘]
            })
        }, {
            test: /.scss$/,
            loader: sassExtract.extract({
                use: [‘css-loader?minimize‘, ‘sass-loader‘]
            })
        }
    ]
},
plugins: [
    cssExtract,
    lessExtract,
    sassExtract
]

//处理图片路径问题
const PUBLIC_PATH=‘/‘;
output: {
    path: path.resolve(__dirname, ‘dist‘),
    filename: ‘bundle.js‘,
    publicPath:PUBLIC_PATH
}

3、拷贝静态文件（有时项目中没有引用的文件也需要打包到目标目录）

　　npm install copy-webpack-plugin -D

const CopyWebpackPlugin = require(‘copy-webpack-plugin‘);

plugins: [
    new CopyWebpackPlugin([{
        from: path.join(__dirname, ‘public‘),       // 从哪里复制
        to: path.join(__dirname, ‘dist‘, ‘public‘)  // 复制到哪里
    }])
]

4、打包前先清空输出目录

　　npm install clean-webpack-plugin -D

const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);

plugins: [
    new CleanWebpackPlugin([path.join(__dirname, ‘dist‘)])
]

5、压缩JS

　　npm install uglifyjs-webpack-plugin -D

const UglifyjsWebpackPlugin = require(‘uglifyjs-webpack-plugin‘);

plugins: [
    new UglifyjsWebpackPlugin()
]

五、服务器代理

//请求到 /api/users 现在会被代理到请求 http://localhost:9000/api/users。
devServer: {
    proxy: {
        "/api": "http://localhost:9000",
    }
}

//去掉请求路径中‘/api‘
devServer: {
    proxy: {
        ‘/api‘: {
            target: ‘http://localhost:4000‘,
            pathRewrite: {
                ‘/api‘: ‘‘
            }
        }
    }
}

六、relove解析

1、extensions

//指定extension之后可以不用在require或是import的时候加文件扩展名,会依次尝试添加扩展名进行匹配
resolve: {
    //自动补全后缀，注意第一个必须是空字符串,后缀一定以点开头
   extensions: ["",".js",".css",".json"],
},

2、 alias

//配置别名可以加快webpack查找模块的速度
//每当引入jquery模块的时候，它会直接引入jqueryPath,而不需要从node_modules文件夹中按模块的查找规则查找
//不需要webpack去解析jquery.js文件
const bootstrap = path.join(__dirname,‘node_modules/bootstrap/dist/css/bootstrap.css‘);
resolve: {
    alias: {
        ‘bootstrap‘: bootstrap
    }
}

七、多入口文件

//有时候我们的页面可以不止一个HTML页面，会有多个页面，所以就需要多入口
// 多个入口，可以给每个入口添加html模板
entry: {
    index: ‘./src/index.js‘,
    main:‘./src/main.js‘
},
output: {
    path: path.resolve(__dirname, ‘dist‘),
    filename: ‘[name].[hash].js‘,
    publicPath:PUBLIC_PATH
},

plugins: [
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        template: ‘./src/index.html‘,
        chunks:[‘index‘],
        filename:‘index.html‘
    }),
    new HtmlWebpackPlugin({
        minify: {
            removeAttributeQuotes:true
        },
        hash: true,
        chunks:[‘login‘],
        template: ‘./src/login.html‘,
        filename:‘login.html‘
    })]
]