The whole process of front-end project construction and deployment (II) : Webpack configuration

1. Introduction

The last article has simply configured some webpack configurations, this document is mainly based on the project to add some loader processing, the subsequent configuration will continue to update according to the actual situation

2. Webpack CSS configuration

2.1. Install dependencies

yarn add css-loader style-loader --dev
Copy the code

Css-loader handles @import and URL () just as JS interprets import/require()

Style-loader inserts CSS into the DOM

2.2. Webpack configuration

module: {
    rules: [{...test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader'.options: {
                        modules: true.// Enable CSS modules},},],},Copy the code

3. Configure WebPack Sass less

3.1. Install dependencies

yarn add less less-loader node-sass sass-loader--dev
Copy the code

Less is a Css precompiler

Less-loaderwebpack Compiles less into a loader for CSS

Node-sass is a preprocessor scripting language that can be interpreted or compiled into cascading style sheets (CSS)

Sas-loader loads sASS /SCSS files and compiles them to CSS

3.2. Webpack configuration

module: {
    rules: [{...test: /\.sass$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader'.options: {
                        modules: {
                            localIdentName: '[hash:base64:6]',},},}, {loader: 'sass-loader'},],}, {test: /\.less$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader'.options: {
                        modules: {
                            localIdentName: '[hash:base64:6]',},},}, {loader: 'less-loader'},],},],},Copy the code

3.3. Node-saas installed separately

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
Copy the code

4. Webpack static resource configuration

4.1. Install dependencies

yarn add file-loader url-loader --dev
Copy the code

File-loader instructs Webpack to emit the desired object as a file and return its common URL

Url-loader loads the file as a Base64 encoded URL

4.2. Webpack configuration

module: {
    rules: [{...test: /\.(jep? g|png|gif)$/,
            use: {
                loader: 'file-loader'.options: {
                    name: 'img/[name].[ext]',},},}, {test: /woff|ttf|eot|svg|otf/,
            use: {
                loader: 'file-loader',}}, {test: /\.jpe?g|png|gif/.// Use url-loader to convert images to base64 in scope, and use file-loader to process images out of scope
            use: {
                loader: 'url-loader'.options: {
                    limit: 100 * 1024.name: `img/[name].[ext]`,},},},],},Copy the code

5. Webpack plugin configuration

5.1. Install the plug-in

yarn add mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin --dev
Copy the code

5.2. The mini – CSS – extract – the plugin

Mini-css-extract-plugin This plugin extracts CSS into a separate file, creates a CSS file for each JS file containing CSS, and supports on-demand loading of CSS and SourceMaps

plugins: [
    new MiniCssPlugin({
        filename: 'css/[name].css',})],module: {
    rules: [{...test: /\.css$/,
            use: [
                MiniCssPlugin.loader,
                { loader: 'style-loader' },
                {
                    loader: 'css-loader'.options: {
                        modules: true.// Enable CSS modules},},],},Copy the code

5.3. Optimize the CSS – assets – webpack – the plugin

Optimize – CSS-assets -webpack-plugin is used to optimize or compress CSS resources

• assetNameRegExp: regular expression to match the names of resources to be optimized or compressed. The default value is/\.css$/g
• cssProcessor: The processor used to compress and optimize CSS. The default is CSSNano. This is a function that should follow the cssnano.process interface (which takes a CSS and options argument and returns a Promise)
• canPrint: {bool} indicates that the plug-in can print information on the console. The default value is true

optimization: {
    minimizer: [
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { safe: true.discardComments: { removeAll: true}},canPrint: true,})]},Copy the code

5.4. Uglifyjs webpack — the plugin

Uglifyjs-webpack-plugin This plugin uses Uglify-js to compress your JavaScript

optimization: {
        new UglifyjsPlugin({
            uglifyOptions: {
                output: {
                    beautify: false.// No formatting
                    comments: false.// Do not keep comments
                },
                compress: {
                    drop_console: true.// Remove print statements},},},],},Copy the code

The first record to write an article, writing limited, many inclusive, ヾ(´ 漢 ‘) Blue Thank you