webpack简单配置项 | 易学教程

webpack

项目中

npm i webpack --save
npm i webpack-cli --save
yarn add html-webpack-plugin
yarn add clean-webpack-plugin
yarn add style-loader css-loader
yarn add file-loader url-loader

webpack-.config.js
多入口单出口

const path = require('path');
module.exports = {
  mode: 'development', // 打包模式
  //entry:"./scr/main.js", // 指定入口
  entry: ['./src/one.js', './src/two.js'], // 数组模式可以将多个文件都打包成为一个。多入口单出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js', // 指定文件的出口模式
  },
};

多入口多出口

const path = require("path")
module.exports = {
    mode:"development", // 打包模式
    // 使用对象模式
    entry:{
        one:'./src/one.js',
        two:'./src/two.js'
    },
    output:{
        path:path.resolve(__dirname,"dist"),
        filename:"[name].bundle.js" // 将入口entry对象的属性名，替换[name]
    }
    // plugins 类型是一个数组，该数组的每一个元素是你要使用的plugin（插件）
    plugins:[

    ]
}

clean-webpack-plugin

清除多余文件

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
  // plugins 类型是一个数组，该数组的每一个元素是你要使用的plugin（插件）
  plugins: [
    new CleanWebpackPlugin(), // 清除多余文件
  ],
};

html-webpack-plugin

插件需要依赖 webpack webpack-cli
可以把生成的 js 文件引入到 Html 页面中，如果不指定模板地址，默认生成一个页面默认名字 index.html

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  // plugins 类型是一个数组，该数组的每一个元素是你要使用的plugin（插件）
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html', // 指定模板地址
      filename: 'home.html', // 指定打包后的HTML名字
      hash: true, //为引入的JS的地址增加后缀，用于清除缓存
      inject: true, // 是否嵌入到HTML文件当中，默认是true
      inject: 'head', // 嵌入到head中
      chunks: ['my'], // 入口的属性名，不是文件名入口是对象才可以，指定打包html引入文件
      excludeChunks: ['my'], // 出了入口的my文件，其他都打包
      title: '大家好，你现在学的是webpack', // 在指定模板地址上使用<%= htmlWebpackPlugin.options.title%>来使用
      minify: {
        removeComments: true, // 清除注释
        removeAttributeQuotes: true, // 清除双引号
        collapseWhitespace: true, // 进行折叠，去除空格
      },
    }),
  ],
};

file-loader url-loader style-loader css-loader

解决图片打包和 sass&less 打包

module.exports = {
  module: {
    // 加载转换， css less sass 图片 jsx
    rules: [
      {
        test: /\.css$/,
        loader: ['style-loader', 'css-loader'],
      },
      {
        // less-loader 将less-->css
        // yarn add less-loader less
        test: /\.less$/,
        loader: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        // yarn add sass-loader node-sass
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        // yarn add url-loader file-loader
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            query: {
              limit: 7869, // limit 指定转换的图片大小，当图片小于该怎样，大于改怎样
              outputPath: 'img', // 指定图片防止的文件夹
            },
          },
        ],
      },
    ],
  },
};

webpack-dev-server

热更新
不会帮你打包

"scripts": {
    "dev":"webpack-dev-server"
  },
module.exports = {
    module: {
        devServer:{
            open:true, // 是否在浏览器当中自动打开
            port:8081,// 设置端口号
            host:"127.0.0.1" // 设置端口号
            historyApiFallback:true,  // 地址重定向，在 / 后面随便输入都是 / 目录
            proxy:{ // 代理服务

                // https://m.lagou.com/m/listmore.json?pageNo=2&pageSize=15 相当于请求这个地址
                // pathRewrite 把/m  替换为空
                "/m":{ // 代理的前缀标识
                    target:"https://m.lagou.com",// 请求的服务
                    changeOrigin:true,
                    pathRewrite:{
                        "^/m":""
                    }
                }
            }
        }
    },
}

7 版本 babel-loader

解析高级语法

yarn add babel-core babel-loader@7 babel-plugin-transform-runtime babel-preset-env babel-preset-stage-0

module.exports = {
  module: {
    rules: [
      { test: /\.css$/, loader: ['style-loader', 'css-loader'] },
      {
        test: /\.less$/,
        loader: ['style-loader', 'css-loader', 'less-loader'],
      },
      {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader'],
      },
      { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=5000' },
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //解析高级语法
    ],
  },
};

{
  "presets": ["env", "stage-0"],
  "plugins": ["transform-runtime"]
}

** 8 版本 babel-loader**

解析高级语法

yarn add babel-loader @babel/core @babel/preset-env @babel/runtime @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties

babel-loader：加载器
@babel/core：babel 核心包,babel-loader 的核心依赖
@babel/preset-env：ES 语法分析包
@babel/runtime 和 @babel/plugin-transform-runtime：babel 编译时只转换语法，几乎可以编译所有时新的 JavaScript 语法，但并不会转化 BOM（浏览器）里面不兼容的 API。比如 Promise,Set,Symbol,Array.from,async 等等的一些 API。这 2 个包就是来搞定这些 api 的。
@babel/plugin-proposal-class-properties：用来解析类的属性的。

module.exports = {
  module: {
    rules: [
      
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, //解析高级语法和7版本不变
    ],
  },
};

{
    "presets":["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime","@babel/plugin-proposal-class-properties"]
}

来源：CSDN

作者：Yifanbaobao103

链接：https://blog.csdn.net/Yifanbaobao103/article/details/104739307

标签

Webpack

test

babel

css