webpack 生产、开发、测试loader及文件输出配置

最新推荐文章于 2022-12-07 16:15:37 发布

涵信

最新推荐文章于 2022-12-07 16:15:37 发布

阅读量5.7k

点赞数

本文链接：https://blog.csdn.net/qq_40860137/article/details/107740832

版权

JavaScript 同时被 3 个专栏收录

7 篇文章 1 订阅

订阅专栏

vue

6 篇文章 0 订阅

订阅专栏

webpack

5 篇文章 0 订阅

订阅专栏

安装loader及插件

npm install webpack webpack-cli webpack-dev-server style-loader css-loader 
less less-loader sass-loader postcss-loader autoprefixer babel-loader 
@babel/core @babel/preset-env eslint eslint-loader jest jest-webpack stylelint 
stylelint-webpack-plugin stylelint-config-standard -D

loader及插件用处分析

webpack webpack打包的代码库
webpack-cli 用来运行dev-server
webpack-dev-server dev-server热加载的主文件

// 项目热加载需要的配置  在package.json文件中配置
// 执行npm run start，运行的是开发环境的配置信息
  "scripts": {
    "start": "webpack-dev-server --env.development --open"
  }

style-loader 用来将css以 style页面级形式输出
css-loader 用来解析css代码

// webpack.config.js文件中解析css文件的配置项
{
    test: /\.css$/i,
    use: ["style-loader", "css-loader"]
}

less less-loader运行的前提
less-loader 用来解析less代码
sass-loader 用来解析sess代码
postcss-loader 用来给css增加浏览器前缀
autoprefixer 限制给什么浏览器增加浏览器前缀需要在package.json中新增一个broswerslist属性, 或者在webpack.config.js同级新增一个.browsersListrc文件里面写入限制信息即可

"broswerslist": [
    "> 0.5",
    "last 1 version",
    "not dead"
  ],


{
// 单写postcss-loader不起效果, 需要配合autoprefixer使用
    test: /\.css$/i,
    use: ["style-loader", "css-loader", {
        loader: "postcss-loader",
        options: {
            plugin: require("autoprefixer") 
        }
     }]
}

babel-loader
@babel/core
@babel/preset-env


{
    test: /\.(js | jsx)$/, 
    use:[
    {
        loader: "babel-loader",
     // babel设置预设
        options: {
            presets: ["@babel/preset-env"]
        }
    },
    {
        loader: "eslint-loader",
        options: {
    // eslint-loader不检测的文件夹 eslint检测的是js文件
            exclude: /node_module/
        }
    }
}

stylelint 函数主资源库
stylelint-webpack-plugin
stylelint-config-standard

// webpack.development.js 文件
const StylelintPlugin = require("stylelint-webpack-plugin");
module.exports = {
    mode: "development",
    // 因为是用webpack-dev-server执行的, 不需要publicPath
    output: {
        filename: "bundle.js"
    },
// stylelint 检测的文件范围
    plugins: [
       new StylelintPlugin({
            files: ["**/*.css", "**/*.less", "**/*.html", "**/*.hml", "**/*.vue"]
       })
    ],
// source 增大文件体积 控制台报错 调试的时候可以看见源码
    devtool: "source-map"
}

// package.json文件中新增stylelint属性 
// 目的是stylelint校验style样式使用什么标准
"stylelint": {
  "extends": "stylelint-config-standard"
}

文件目录

webpack 配合vue使用

安装解析vue及编写vue的loader和函数库

npm i vue vue-loader vue-style-loader vue-html-loader vue-template-compiler

vue 我们日常生活中用的Vue 实际上使用的是 vue/dist/vue.esm 需要在resolve中的alias 取个"vue" 的别名
vue-style-loader 可以解析普通的css 和 vue组件中的css
vue-html-loader 解析vue文件中的html模板
vue-template-compiler 解析vue文件中的template模板

实例代码

webpack.config.js

const path = require("path");
const StylelintPlugin = require("stylelint-webpack-plugin");
const { ESLINT } =  require("./config/idnex");
// 这个文件动了 热加载就会有问题 需要重新 npm run start
module.exports = function(env, argv) {
    env = env || {development: true};
    console.log(env);
    let conf = null;
    if(env.production){
        conf = require("./config/webpack.production");
    } else if(env.development){
        // -env.development 会传递给 webpack-dev-server 之后在传递给webpack
        conf = require("./config/webpack.development");
    } else {
        // test 不能加 --env.test 因为jest-webpack有自己的env 所以放在else中
        // 运行jest-webpack会在项目目录中找所有带test的文件 
        conf = require("./config/webpack.jest");
    }
    return {
        entry: "./src/js/index.js",
        module: {
            rules: [
                // JavaScript eslint检测 ==> babel转换编译
                {
                    test: /\.(js | jsx)$/, 
                    use:[{
                        loader: "babel-loader",
                        options: {
                            presets: ["@babel/preset-env"]
                        }
                    },
                    ...ESLINT?[{
                        loader: "eslint-loader",
                        options: {
                            exclude: /node_module/
                        }
                    }] : []]
                },
                // css
                {
                    test: /\.css$/i,
                    use: ["vue-style-loader", "css-loader", {
                        loader: "postcss-loader",
                        options: {
                            plugin: require("autoprefixer") 
                        }
                    }]
                },
                // less
                {
                    test: /\.less$/i,
                    use: ["style-loader", "css-loader", "less-loader"]
                },
                // imgs
                {
                    test: /.(png | jpg | svg)$/i,
                    use: [{
                        loader: "url-laoder",
                        options: {
                            outputPath: "imgs/",
                            limit: 1024 * 4
                        }
                    }]
                },
                // fonts
                {
                    test: /\.(eot | svg | ttf | woff | woff2)$/i,
                    use: [{
                        loader: "url-loader",
                        options: {
                            outputPath: "fonts/",
                            limit: 1024 * 4
                        }
                    }]
                },
                //vue
                {test: /\.vue$/i, use: ["vue-loader"]}
            ]
        },
        ...conf,
        resolve: { 
            alias: {
                'vue': 'vue/dist/vue.esm',
                "@": path.resolve(__dirname, "src")
            }
        }
    }
}

webpack.development.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const StylelintPlugin = require("stylelint-webpack-plugin");
const VueLoaderPlugin  = require("vue-loader/lib/plugin");
const { STYLELINT}  = require("./idnex");
module.exports = {
    mode: "development",
    // 因为是用webpack-dev-server执行的, 不需要publicPath
    output: {
        filename: "bundle.js"
    },
    plugins: [
        ...STYLELINT ? [new StylelintPlugin({
            files: ["**/*.css", "**/*.less", "**/*.html", "**/*.hml", "**/*.vue"]
        })] : [],
        
        // ,
        // new HtmlWebpackPlugin({
        //     template: path.resolve(__dirname, "../index.html")
        // })
        new VueLoaderPlugin()
    ],
    // source 增大文件体积 调试的时候可以看见源码
    devtool: "source-map"
}

webpack.production.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const StylelintPlugin = require("stylelint-webpack-plugin");
const VueLoaderPlugin  = require("vue-loader/lib/plugin");
module.exports = {
    mode: "development",
    // 因为是用webpack-dev-server执行的, 不需要publicPath
    output: {
        path: path.resolve(__dirname, "../build"),
        filename: "bundle.min.js"
    },
    plugins: [
        new StylelintPlugin({
            files: ["**/*.css", "**/*.less", "**/*.html", "**/*.hml", "**/*.vue"]
        }),
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "../index.html")
        }),
        new VueLoaderPlugin()
    ]
}

webpack.test.js

const StylelintPlugin = require("stylelint-webpack-plugin");
const VueLoaderPlugin  = require("vue-loader/lib/plugin");
module.exports = {
    mode: "development",
    // 因为是用webpack-dev-server执行的, 不需要publicPath
    output: {
        filename: "bundle.js"
    },
    plugins: [
        new StylelintPlugin({
            files: ["**/*.css", "**/*.less", "**/*.html", "**/*.hml", "**/*.vue"]
        }),
        // jest-webpack 只能测试js文件不能测试html
        // new HtmlWebpackPlugin({
        //     template: path.resolve(__dirname, "../index.html")
        // })
        new VueLoaderPlugin()
        
    ]
}

package.json

{
  "name": "webpack_0710",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --env.development --open",
    "build": "webpack --env.production",
    "test": "jest-webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "autoprefixer": "^9.8.4",
    "babel-loader": "^8.1.0",
    "css-loader": "^3.6.0",
    "eslint": "^7.4.0",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-vue": "^6.2.2",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.3.0",
    "jest": "^26.1.0",
    "jest-webpack": "^0.5.1",
    "less": "^3.11.3",
    "less-loader": "^6.2.0",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^9.0.2",
    "style-loader": "^1.2.1",
    "stylelint": "^13.6.1",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-webpack-plugin": "^2.1.0",
    "url-loader": "^4.1.0",
    "vue": "^2.6.11",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.9.3",
    "vue-loader-plugin": "^1.3.0",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "broswerslist": [
    "> 0.5",
    "last 1 version",
    "not dead"
  ],
  "stylelint": {
    "extends": "stylelint-config-standard"
  },
  "jest": {
    "roots": [
      "./tests"
    ]
  }
}

涵信

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack 生产、开发、测试loader及文件输出配置

安装loader及插件npm install webpack webpack-cli webpack-dev-server style-loader css-loader less less-loader sass-loader postcss-loader autoprefixer babel-loader @babel/core @babel/preset-env eslint eslint-loader jest jest-webpack stylelint stylelint-web.
复制链接

扫一扫