webpack工程化

刘嘿哈

发布于 2022-10-25 14:01:55

3530

发布于 2022-10-25 14:01:55

文章被收录于专栏：js笔记

初始化工程

npm init -y # 初始化npm配置⽂件
npm install --save-dev webpack@4.43.0 # 安装核⼼库
npm install --save-dev webpack-cli@3.3.12 # 安装命令⾏⼯具

配置.npmrc设置npm源为淘宝镜像

⼤家⼀开始使⽤ npm 安装依赖包时，肯定感受过那挤⽛膏般的下载速度，上⽹⼀查只需要将 npm 源设置为淘宝镜像源就⾏，在控制台执⾏⼀下以下命令： npm config set registry https://registry.npm.taobao.org

添加⼀个 .npmrc 并做简单的配置即可：

# 创建 .npmrc ⽂件
# 在该⽂件内输⼊配置
registry=https://registry.npm.taobao.org/

创建src⽬录及⼊⼝⽂件

创建webpack配置⽂件，默认配置

# webpack.config.js
const path = require("path");
module.exports = {
 entry: "./src/index.js",
 output: {
 path: path.resolve(__dirname, "./dist"),
 filename: "[name].js",
 },
 mode: "development",
};

样式处理

集成css样式处理：css-loader style-loader 创建index.css

# 安装
npm install style-loader css-loader -D
# 配置webpack.config.js中配置项
module: {
 rules: [
 {
 test: /\.css$/,
 use: ["style-loader", "css-loader"],
 },
 ],
},

集成less sass

# sass
npm install node-sass sass-loader -D
# less
npm install less less-loader -D
#配置
rules:[
{
 test: /\.scss$/,
 use: ["style-loader","css-loader","sass-loader"]
 },
 {
 test: /\.less$/,
 use: ["style-loader","css-loader","less-loader""]
 }
]

集成postcss:

Github:https://github.com/postcss/postcss 相当于babel于JS postcss主要功能只有两个：第⼀就是把css解析成JS可以操作的抽象语法树AST，第⼆就是调⽤插件来处理AST并得到结果；所以postcss⼀般都是通过插件来处理css，并不会直接处理⽐如：⾃动补⻬浏览器前缀: autoprefixer css压缩等 cssnano

npm install postcss -D
npm install postcss-loader autoprefixer cssnano -D

配置postcss

# 根目录创建postcss.config.js
# 配置postcss.config.js
module.exports = {
 plugins: [require("autoprefixer")],
};
# 配置package.json
"browserslist":["last 2 versions", "> 1%"],

# 或者直接在postcss.config.js⾥配置
module.exports = {
 plugins: [
 require("autoprefixer")({
 overrideBrowserslist: ["last 2 versions", "> 1%"],
 }),
 ],
};
# 或者创建.browserslistrc⽂件
> 1%
last 2 versions
not ie <= 8

webpack.config.js中配置,postcss-loader在css-loader前面

  {
            test: /\.less$/,
            use: ['style-loader', 'css-loader','postcss-loader', 'less-loader']
        }

样式⽂件分离和自动清空dist目录

经过如上⼏个loader处理，css最终是打包在js中的，运⾏时会动态插⼊head中，但是我们⼀般在⽣产环境会把css⽂件分离出来（有利于⽤户端缓存、并⾏加载及减⼩js包的⼤⼩），这时候就⽤到 mini-cssextract-plugin 插件。⼀般⽤于⽣产环境

# 安装
npm install mini-css-extract-plugin -D 
npm install clean-webpack-plugin -D
# 使⽤
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    // 插件需要参与模块解析，须在此设置此项，不再需要style-loader
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: true, // 模块热替换，仅需在开发环境开启
                            // reloadAll: true,
                            // ... 其他配置
                        }
                    },
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ],
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),//清空dist目录插件
        new MiniCssExtractPlugin({
            filename: '[name].css', // 输出⽂件的名字
            // ... 其他配置
        }),
    ]
};

自定义loader

webpack.config.js中使用自定义loader

loader路径为绝对路径，options参数，在loader中this.query获取

 {
                test: /\.js$/,
                use: [{
                    loader: path.resolve(__dirname, './myloader/replace-loader.js'),
                    options:{
                        name:'老刘'
                    }
                }]
            },

创建myloader文件夹，创建replace-loader.js文件

// 自定义loader
// 不能是箭头函数
// loader中的options在这里this.query中获取 
// this.callback(error:Error|null,content:string|Butter,sourceMap?:SourceMap,meta?:any)

// 处理异步 this.async()
module.exports = function (source) {
    console.log(this.query)
    const callback = this.async()
    console.log(333)
    setTimeout(() => {
        callback(null, source.replace('hellow', 'xx你的'))
    }, 3000)
    // return source.replace('hellow', '刘xxx   ');
}

为了避免自定义loader路径写的不优雅

webpack.config.js中配置

entry: './src/index.js',
  output: {
      path: path.resolve(__dirname, './dist'),
      filename: '[name].js'
  },
  mode: 'development',
  // 配置这个
  resolveLoader:{
      modules:['node_modules','./myLoader']
  },

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-11-04，如有侵权请联系 cloudcommunity@tencent.com 删除

css