webpack打包

1、首先安装webpack,如果你使用 webpack 4+ 版本，你还需要安装 CLI。

npm install --save-dev webpack@<version>
npm install --save-dev webpack-cli

在package.json的scripts属性里面配置快捷指令


  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
}

2、通过配置webpack-dev-server实现自动打包，需要使用3.x版本，不然会跟webpack-cli冲突报错

npm install webpack-dev-server --save-dev

通过package.json的scripts属性配置webpack-dev-server的启动命令：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "webS": "webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

3、通过html-webpack-plugin生成预览页面：通过在dist目录下生成一个临时index.html文件,启动webpack-dev-server时会自动打开这个文件

npm i html-webpack-plugin

在webpack.config.js中对html-webpack-plugin进行配置

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({
  template: "./src/index.html",
  filename: "index.html",
});
module.exports = {
  entry: path.resolve(__dirname, "./src/index.js"),
  mode: "development",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [htmlPlugin]
};

4、通过css-loader、style-loader实现以模块化的形式载入css文件

npm install --save-dev style-loader css-loader

在webpack.config.js中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      }
    ],
  },
};

5、通过less-loader、less实现以模块化的形式载入less文件

$ npm install less less-loader --save-dev

在webpack.config.js中进行配置

module: {
    rules: [
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"], // compiles Less to CSS
      }
    ],
  },

6、通过sass-loader、sass实现以模块化的形式载入less文件

npm install sass-loader sass --save-dev

在webpack.config.js中进行配置

module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into Commonjs
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },

7、通过autoprefixer、postcss-loader实现自动添加浏览器前缀

npm install autoprefixer postcss-loader --save-dev

通过postcss.config.js进行配置

module.exports = {
  plugins: [require("autoprefixer")],
};

并在webpack.config.js中进行配置

 module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
}

8、通过url-loader、file-loader打包css中的字体和图片

npm install url-loader file-loader --save-dev

并在webpack.config.js中进行配置，其中 ? 之后的是 loader 的参数项。 limit 用来指定图片的大小，单位是字节(byte),只有小于 limit 大小的图片，才会被转为 base64 图片

module: {
 rules: [
 {
 test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
 use: 'url-loader?limit=16940'
 }
 ]
 }

9、通过babel使用js高级语法

（1）安装babel转换器相关的包：

npm i babel-loader @babel/core @babel/runtime -D

（2）安装babel语法插件相关的包：

npm i @babel/preset-env @babel/plugin-transformruntime @babel/plugin-proposal-class-properties –D

配置babel.config.js文件

module.exports = {
 presets: [ '@babel/preset-env' ],
 plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposalclass-properties’ ]
 }

配置webpack.config.js文件：exclude 为排除项，表示 babel-loader 不需要处理 node_modules 中的 js 文件

module: {
 rules: [
      { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
 ]
}

相关推荐