webpack5搭建

从0搭建webpack5

思考：整个流程，首先想到项目整体会涉及到的技术，例如一个vue项目，首先.vue文件.scss .css .js .jsx .ts 登录

1.那么第一步npm init -y ,安装webpack

    yarn add webpack webpack-cli ，安装完毕后，新建webpack.config.js 文件

2. 新建项目

   新建src目录，并新增main.js App.vue ，在main.js 中引入app.vue 文件

import Vue from 'vue'
import App from './app.vue'

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
    render: (h) => h(App)
}).$mount(root)

3. 由于webpack本身不能识别js以外的文件，所以需要各种loader

    yarn add  vue

    yarn add -D vue-loader vue-style-loader vue-template-compiler

    yarn add scss sass-loader dart-loader css-loader style-loader -D

    yarn add url-loader file-loader -D (webpack5已经出了新的替代方式,type:'asset'/type:'asset/resource'等,详细查官网文档)

    yarn add webpack-dev-server -D 开发环境服务器

     yarn add cross-env -D 用于配置package.json script脚本 ,"dev": "cross-env NODE_ENV=development webpack serve --hot --config webpack.config.js" ，这样在webpack.config.js 文件里才可以取到process.env 数据,来判断是开发还是生产环境

    yarn add html-webpack-plugin  -D 自动生成html文件

     yarn add -D babel-loader @babel/core @babel/preset-env -D  babel 相关的

     yarn add postcss postcss-loader postcss-preset-env -D 可以直接在webpack.config.js文件配置postcss-loader 的postcssOptions ，也可以新建postcss.config.js文件,放入配置项，详细查阅文档，主要是为了处理css前缀兼容等

      yarn add -D webpack-merge

    常用 plugins:

            new webpack.optimize.CommonsChunkPlugin(options); 将公共模块与捆绑软件分开，可以将生成的分块文件最初加载一次，用于打包时的配置

const path = require('path')
const webpack = require('webpack')
// webpack.config.js webpack 5 以后配置，必须要配置VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')
var MiniCssExtractPlugin = require('mini-css-extract-plugin') // 提取css到单独文件
const HtmlWebpackPlugin = require('html-webpack-plugin') // 生成html文件


let isDev = process.env.NODE_ENV === 'development'

const config = {
    mode: process.env.NODE_ENV,
    entry: path.join(__dirname, './src/main.js'),
    output: {
        publicPath: '/',
        path: path.join(__dirname, 'dist'),
        filename: "bundle.[hash].js",
        clean: true
    },
    devServer: {
        contentBase: './dist',
        hot: true, // 热加载
        port: '9900',
        host: '0.0.0.0',
        // 出现编译器错误或警告时，在浏览器中显示全屏覆盖
        overlay: {
            warnings: true,
            errors: true
        },
        open: false
    },
    resolve: {
       alias: {
          // 指定vue加载的文件,加载这个可以在js里写vue的template
          vue:path.resolve(__dirname,'../node_modules/vue/dist/vue.esm.js'),
          Templates: path.resolve(__dirname, 'src/templates/')
       },
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [{
                    loader: 'vue-loader'
                }],
                exclude: /node_modules/,
                include: path.join(__dirname, 'src')
            },
            {
                test: /\.jsx$/,
                use: ['babel-loader']
            },
            {
                test: /\.s[ac]ss$/,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    "style-loader",
                    // 将 CSS 转化成 CommonJS 模块
                    "css-loader",
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                        }
                    },
                    // 将 Sass 编译成 CSS
                    "sass-loader",
                ],
            },
            {
                test: /\.css$/,
                use: [
                    isDev ? 'vue-style-loader'
                        : MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset' // webpack5 新增加的内置解析,之前用url-loader file-loader
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            }
        ]
    },
    devtool:'eval-cheap-module-source-map'
    plugins: [
       // 热模块重载
        new webpack.HotModuleReplacementPlugin({}),
        //没有错误输出插件
        new webpack.NoEmitOnErrorsPlugin()
        // 这个设置是为了在项目代码中也能使用process.env.NODE_ENV,根据获取的环境判断相应的数
        // 允许你创建可在编译时配置的全局常量
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: isDev ? '"development"' : '"production"'
            }
        }),
        // 生成html
        new HtmlWebpackPlugin({
            template:path.resolve(__dirname,'template的模板地址，在public里新建index.html')
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),
        // webpack5 必须要使用的插件
        new VueLoaderPlugin()
    ]
}

module.exports = config