1. 初始化 webpack 项目 npm init -y (初始化一个 package.json 文件)

2. npm i webpack webpack-cli -D 下载这两个依赖包

3. npx webpack ./src/main.js –mode development //【 入口文件 打包模式 】 npx webpack 指令

// npx webpack ./src/main.js –mode production // 生产环境

4. 当你的项目下创建了 webpack.config.js 并在里面配置了相应 可以直接npx webpack 即可运行打包;【同3的升级版】

5. 配置css 规则
npm install style-loader css-loader –save-dev

{
test: /\.css$/,
use: [
//执行顺序,从左到右 (从上到下)
“style-loader”, //将js中的css创建style属性添加到html中生效
“css-loader”, //将css资源编译成commonjs的模块到js中
],
},

6. npm install –save-dev html-webpack-plugin

plugins: [new HtmlWebpackPlugin()],

7. npm install –save-dev webpack-dev-server 执行 npx webpack serve //开发环境 修改自动打包

devServer: {
static: {
directory: path.join(__dirname, “public”),
},
compress: true,
port: 9000,
},

8. 为了配置 开发环境与生产环境的config 新建目录config 创建创建 webpack.config.dev.js webpack.config.prod.js
执行 npx webpack serve –config ./config/webpack.config.dev.js 就可以启动开发环境
同理: npx webpack –config ./config/webpack.config.prod.js 打包生产环境资源

9. 在package.json 配置

“scripts”: {
“dev”: “webpack serve –config ./config/webpack.config.dev.js”,
“build”: “webpack –config ./config/webpack.config.prod.js”
},

启动开发环境 :npm run dev
打包生产环境:npm run build

10. npm install –save-dev mini-css-extract-plugin //将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。
<见下面的webpack.config.prod.js>

11. npm i postcss-loader postcss postcss-preset-env -D //样式兼容性处理
注:加载器中的配置 要在css-loader下面 在less-loader sass-loader的前面

12 npm install css-minimizer-webpack-plugin –save-dev // 压缩css

13. devtool 脚本的映射
开发环境 devtool:”cheap-module-source-map” //错误只提示到行
生产环境 devtool:”source-map” //错误提示到行、列

14. 热模块替换 (开发环境)
dev-serve 设置 hot:true
15: 加载器里面 oneOf <见下面的webpack.config.prod.js>

webpack.config.prod.js:

const path = require("path"); // node 核心模块  专门处理路径问题
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
//封闭一个方法
function getStyleLoader(pre) {
  return [
    //可以使用多个loader
    //执行顺序,从左到右 (从上到下)
    // "style-loader", //将js中的css创建style标签添加到html中生效
    MiniCssExtractPlugin.loader, //提取css成单独的文件
    "css-loader", //将css资源编译成commonjs的模块到js中
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: [
            "postcss-preset-env", //能解决大多数样式兼容的问题
          ],
        },
      },
    },
    pre,
  ].filter(Boolean); //filter(undefined) 过虑掉传空的值
}

module.exports = {
  //入口
  entry: ["./src/main.js"], //相对路径  , "./public/index.html", "./public/test.html"
  //输出
  output: {
    //文件的输出路径
    // __dirname nodejs的变量 代表当前文件的文件夹目录
    path: path.resolve(__dirname, "../dist"), //绝对路径
    filename: "js/main.js", //输出到对应的目录下
    clean: true, //自动清空上次打包的内容
  },
  //加载器
  module: {
    rules: [
      //loader 的配置
      {
        oneOf: [
          //只被其中一个处理
          {
            test: /\.css$/,
            //loader:'xxx',  // 只能使用一个loader
            use: getStyleLoader(),
          },
          {
            test: /\.less$/,
            use: getStyleLoader("less-loader"),
            // [
            //   MiniCssExtractPlugin.loader,
            //   "css-loader",
            //   {
            //     loader: "postcss-loader",
            //     option: {
            //       postcssOptions: {
            //         plugins: [
            //           "postcss-preset-env", //能解决大多数样式兼容的问题
            //         ],
            //       },
            //     },
            //   },
            //   "less-loader",
            // ], //下载 less-loader 依赖
          },
          {
            test: /\.sass$/,
            use: getStyleLoader("sass-loader"),
            // [
            //   MiniCssExtractPlugin.loader,
            //   "css-loader",
            //   {
            //     loader: "postcss-loader",
            //     option: {
            //       postcssOptions: {
            //         plugins: [
            //           "postcss-preset-env", //能解决大多数样式兼容的问题
            //         ],
            //       },
            //     },
            //   },
            //   "sass-loader",
            // ], //下载 sass-loader 依赖
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                //小于10kb的图转化为base64
                //优化 减少请求数 缺点:体积会变大一丢丢
                maxSize: 10 * 1024, //10kb
              },
            },
            generator: {
              //输出图片名称
              //hash:10  hash值取前10位
              filename: "images/[hash:10][ext]",
            },
          },
        ],
      },
    ],
  },
  //插件
  plugins: [
    //插件的配置
    new HtmlWebpackPlugin({
      //模板  以public/index.html 为模板
      //新的html 文件特点 1:结构和原文一致 2.自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
    new MiniCssExtractPlugin({
      filename: "css/main.css",
    }),
    new CssMinimizerPlugin(),
  ],

  //模式
  mode: "production", //production
  devtool: "source-map", //错误提示到行、列
};

  webpack.config.dev.js:

const path = require("path"); // node 核心模块  专门处理路径问题
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  //入口
  entry: "./src/main.js", //相对路径
  //输出
  output: {
    //文件的输出路径
    // __dirname nodejs的变量 代表当前文件的文件夹目录
    path: path.resolve(__dirname, "../dist"), //绝对路径
    filename: "js/main.js", //输出到对应的目录下
    clean: true, //自动清空上次打包的内容
  },
  //加载器
  module: {
    rules: [
      //loader 的配置
      {
        oneOf: [
          //只被其中一个处理
          {
            test: /\.css$/,
            //loader:'xxx',  // 只能使用一个loader
            use: [
              //可以使用多个loader
              //执行顺序,从左到右 (从上到下)
              "style-loader", //将js中的css创建style标签添加到html中生效
              "css-loader", //将css资源编译成commonjs的模块到js中
            ],
          },
          {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"], //下载 less-loader 依赖
          },
          {
            test: /\.sass$/,
            use: ["style-loader", "css-loader", "sass-loader"], //下载 sass-loader 依赖
          },
          {
            test: /\.(png|jpe?g|gif|webp|svg)$/,
            type: "asset",
            parser: {
              dataUrlCondition: {
                //小于10kb的图转化为base64
                //优化 减少请求数 缺点:体积会变大一丢丢
                maxSize: 10 * 1024, //10kb
              },
            },
            generator: {
              //输出图片名称
              //hash:10  hash值取前10位
              filename: "images/[hash:10][ext]",
            },
          },
        ],
      },
    ],
  },
  //插件
  plugins: [
    //插件的配置
    new HtmlWebpackPlugin({
      //模板  以public/index.html 为模板
      //新的html 文件特点 1:结构和原文一致 2.自动引入打包输出的资源
      template: path.resolve(__dirname, "../public/index.html"),
    }),
  ],
  //开发服务器
  devServer: {
    // static: {
    //   directory: path.join(__dirname, "public"),
    // },
    host: "localhost",
    compress: true,
    port: 9000,
    open: true,
    hot: true,
  },
  //模式
  mode: "development", //production
  devtool: "cheap-module-source-map", //错误只提示到行
};

  

原文地址:http://www.cnblogs.com/tap819/p/16860639.html

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,请务用于商业用途! 3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入! 4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 5. 如有链接无法下载、失效或广告,请联系管理员处理! 6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 7. 如遇到加密压缩包,默认解压密码为"gltf",如遇到无法解压的请联系管理员! 8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载 声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性