webpack入门二

css loader

npm install style-loader css-loader
npm install less less-loader
npm install sass dart-sass sass-loader  

module.export = {
    module: {
        rules: [
            {
                // 重点
                test: /\.css$/,
                use: [
                     // 从下往上执行，先后顺序不能改变 
                    'style-loader', // 将css通过style方式插入html中
                    {
                        loader: 'css-loader', // 转化css中的@import 路径url
                        options: {
                         // 如果是css@import 导入的css需要预加载后面的几个loader，这里需要设置为1。如果是less, sass就不需要设置，因为less,sass支持导入，在这里就没有导入了，所以不需要配置了
                            importLoaders: 1
                        }
                    },
                    'less-loader' || 'sass-loader'
                ]
            }
        ]
    }
}

file-loader url-loader

module.export = {
    module: {
        rules: [
            {
                // 重点
                test: /\.(jpg|png|gif|svg)$/,
                use: [
                    {
                        loader: 'file-loader', // 用了加载图片路径 
                        options: {
                            esModule: false, // 不起用esModule
                            name: '[hash:10].[ext]' //hash 10位使用以前的扩展名
                        }
                    },
                ]
            }
        ]
    }
}

module.export = {
    module: {
        rules: [
            {
                // 重点
                test: /\.(jpg|png|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader', // 用了加载图片路径 
                        options: {
                            limit: 8*1024, // 当图片小于8kb时导入的图片转化为base64,减少http请求 
                            esModule: false, // 不起用esModule
                            name: '[hash:10].[ext]' //hash 10位使用以前的扩展名
                        }
                    },
                ]
            }
        ]
    }
}

 webpack5
module.export = {
    module: {
        rules: [
            {
                // 重点
                test: /\.(jpg|png|gif|svg)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 8 * 1024 // 8kb
                    }
                },
                generator: {
                    filename: '[hash][ext][query]'
                }
            }
        ]
    }
}

读取配置文件 .env

文件内容 config/.env NODE_ENV=production

    npm install dotenv -D
    
    require('dotenv').config({path: path.resolve(__dirname, './config/.env')})
    console.log(process.env.NODE_ENV) // 就为配置的信息

浏览器css兼容

    npm install postcss-loader postcss-preset-env -D
    
    module.export = {
        module: {
            rules: [
                {
                    // 重点
                    test: /\.css$/,
                    use: [
                         
                        'style-loader', 
                        {
                            loader: 'css-loader', 
                            options: {
                                importLoaders: 1
                            }
                        },
                        'postcss-loader', // 给兼容的浏览器加前缀
                        'sass-loader'
                    ]
                }
            ]
        }
    }
    
    根目录配置 postcss.config.js  .browserslistrc 文件
    
    1. postcss.config.js文件
        module.exports = {
            plugins: [
                'postcss-preset-env'
            ]
        }
    
    2. .browserslistrc文件
        # Browsers that we support 

        last 3 version
        > 1%

js兼容

npm install babel-loader @babel/core @babel/preset-env  -D @babel/polyfill core-js
// 添加两个class其他插件
npm install @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators -D

// 装饰器插件需要配置 根目录 jsconfig.json文件支持
{
    "compilerOptions": {
        "experimentDecorators": true
    }
}

// 配置babel .babelrc

{
    "presets": [
        ["@babel/preset-env", {"useBuiltIns": "usage", "corejs": { "version": 3 } }]
    ],
    "plugins": [
        ["@babel/plugin-proposal-decorators", { "legacy": true }],
        ["@babel/plugin-proposal-class-properties"]
     ]
}

// 配置webpack.config.js

 module.export = {
        module: {
            rules: [
                {
                    // 重点
                    test: /\.js$/,
                    loader: 'babel-loader'
                }
            ]
        }
    }

eslint

添加.eslintignore可以忽略哪些文件不校验

// 添加eslint
npm install eslint eslint-loader babel-eslint -D
// 配置webpack.config.js
 module.export = {
        module: {
            rules: [
                {
                    // 重点
                    test: /\.js$/,
                    loader: 'eslint-loader',
                    enforce: 'pre',
                    options: {
                        fix: true
                     },
                     exclude: /node_modules/
                }
            ]
        }
    }
    
 // vue 添加aribnb规范
 npm install eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import babel-eslint eslint-plugin-vue -D

module.exports = {
  // 关键：启用 airbnb 规则
  extends: ['plugin:vue/essential', 'airbnb-base'],
  env: {
    // 添加browser和es6的环境
    browser: true,
    es6: true,
    node: true,
  },
  // 使用语言及版本
  parserOptions: {
    parser: 'babel-eslint',
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  // 个人自定义规则
  rules: {
    'linebreak-style': 'off',
    'no-param-reassign': ["error", { "props": false }],
    'no-console': 'off',
    indent: ['error', 4],
    quotes: 'error',
  },
};
    
//react 添加airbnb规范    
npm install yarn add eslint-config-airbnb eslint-plugin-import -D
// 添加 react
eslint-plugin-react eslint-plugin-jsx-a11y


    
    // 配置 .eslintrc.js
    
    module.exports = {
        extends: 'airbnb',
        parser: 'babel-eslint',
        env: {
            browser: true,
            node: true
        },
        rules: {
            'linebreak-style': 'off',
            'no-param-reassign': ["error", { "props": false }],
            'no-console': 'off',
            indent: ['error', 4],
            quotes: 'error',
        }
    }
    
    

全局注入插件

1.providePlugin
npm install lodash
 module.exports = {
     plugins: [
        new webpack.ProvidePlugin({
            _: 'lodash',
        }),
    ],
 }
 
2.externals属性配合CDN
   2.1    index.html 在head标签内引入 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   2.2    module.exports = {
            externals: {
                lodash: '_'
            }
           }
   2.3 在代码任何地方可以导入  import _ from 'lodash'; 使用

3.expose-loader
npm install expose-loader
 module.exports = {
        module: {
            rules: [
                {
                    test: /lodash/,
                    loader: 'expose-loader',
                    options: {
                        exposes: {
                            globalName: '_',
                            override: true,
                        },
                    },
                },
             ]
         }
 }
 
 index.js 文件
 const _ = require("lodash");
 // 就可以拿到全局拿到了
 console.log(window._)