鹤仔z
鹤仔z

什么？你咋还不会搭webpack？

前言：

此文档演示一套webpack项目的完整搭建以及常见配置，保持更新
安装命令默认为cnpm i *——可以根据喜好改成npm或者yarn
后缀为 -D: --save-dev 也就是说当前依赖要安装到开发环境中去 devDependenc
后缀为 -S: --save 也就是说当前依赖要安装到生产环境中去 Dependencies

一：初始化

  • 创建项目文件夹：我想你应该会
  • 初始化项目：npm init -y

二：安装webpack以及webpack-cli

  • 安装命令：cnpm i webpack webpack-cli -D

三：创建配置环境文件

  • 根目录创建config文件夹

  • config文件夹里分别创建：

    1. base.config.js

      公用配置

    2. dev.config.js

      开发环境配置

    3. pro.config.js

      生产环境配置

四：创建开发目录

  • 在根目录创建src目录

    src文件夹中必须有一个入口文件，通常是main.js

  • 在根目录创建public目录

    项目的静态资源文件

五：webpack基本配置项（base.config.js)

  • entry

    入口文件配置

        // 配置入口文件和出口文件地址
    const PATH = {
        app: path.join(__dirname, "../src/main.js"),
        build: path.join(__dirname, "../dist")
    }    
    
    // 入口文件配置
    entry: {
        app: PATH.app
    },

  • output

    出口文件配置

        output: {
        path: PATH.build,
        filename: "[name].js"
    },

  • resolve

    文件引入优先级与别名的配置

     resolve: {
     //文件引入的优先级
     extensions: [".vue",".js", "scss", "art", "css", "json"],
     //别名的配置
     alias: {
         "@": path.join(__dirname, "../src"),
         // ...
     }
 },

  • plugins

    插件配置：webpack中凡是用插件的地方都必须要在plugins中进行使用

    plugins是个数组

        plugins: [
        new Xxx(),
        // ...
    ],

  • module

    凡是需要将浏览器不识别的文件转换为浏览器识别的文件的配置项都需要在module中进行配置，比如各种loader都在这里

        module: {
        rules: [
            {
                // ...
            },
            // ...
        ]
    }

六：安装常用的plugins插件

cnpm i html-webpack-plugin clean-webpack-plugin copy-webpack-plugin extract-text-webpack-plugin@next -D

  • html-webpack-plugin

    自动

    公用配置

    new HtmlWebpackPlugin({
    template:"./public/index.html",
    filename:"index.html"
})

  • clean-webpack-plugin

    自动删除旧的html文件

    公用配置，解构赋值引入

    new CleanWebpackPlugin()

  • copy-webpack-plugin

    拷贝静态资源

    公用配置

    new CopyWebpackPlugin([
    {
        context:path.join(__dirname,"../public"),
        from:"**/*",
        to:path.join(__dirname,"../dist"),
        ignore:["index.html"]
    }
])

  • extract-text-webpack-plugin

    抽离css文件

    生产环境配置

七：安装常用的loader

  1. 处理JS的loader

    cnpm i babel-loader @babel/core @babel/preset-env -D

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

    注意：一定要在根目录创建文件名为.babelrc的文件，并写入以下配置项（删掉注释）：

    {
    "presets": [
        [
            // 低版本的转换
            "@babel/preset-env",
            {
                //设置浏览器版本
                "targets":{
                    //兼容到所有浏览的最后2个版本
                    "browsers":["last 2 version"]
                }
            }
        ]
    ]
}
  1. 处理图片的loader

    cnpm i url-loader file-loader -D

    • url-loader

      一般用来解析一些体积比较小的图片，可以通过options中的limit来设置图片的大小，如果图片大于limit的大小了则会用file-loader进行解析

    • file-loader

      一般用来解析比较大的图片

  2. 处理css的loader

    处理css的loader，开发配置和生产配置要分离

    cnpm i style-loader css-loader sass-loader node-sass postcss-loader autoprefixer -D

    • style-loader

    • css-loader

    • sass-loader

      用来解析sass文件

    • node-sass

      用来解析sass文件，没它不行

    • postcss-loader

    • autoprefixer

  3. 处理vue单文件组件

    cnpm i vue-loader vue-template-compiler -D

    • vue-loader

      1. 允许Vue组件的每个部分使用其他的webpack loader。例如在