webpack简易配置

小咪咪 2022-10-25 04:46 221阅读 0赞

webpack基础配置文章查考

1、[https://blog.csdn.net/fengmin\_w/article/details/81984514][https_blog.csdn.net_fengmin_w_article_details_81984514]

2、[https://mp.weixin.qq.com/s/0qbefXeRuzlqTk4LySiUNw][https_mp.weixin.qq.com_s_0qbefXeRuzlqTk4LySiUNw]   webpack4和vue3结合的基本配置搭建

以下是整合多篇文章的基于webpack4和vue3的0搭建输出基础项目，便于查缺补漏

**配置webpack环境**

1、创建项目，并进入目录中生成package.json文件

mkdir test1 && cd test1
    npm init -y

2、安装依赖webpack  webpack-cli

npm i webpack webpack-cli -D

3、在项目根目录创建文件src/main.js,webpack.config.js，index.html

4、在webpack.config.js文件中添加配置如下:clean-webpack-plugin用于清除旧文件和缓存

const path = require('path')
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    
    module.exports = {
        mode: 'development',
        entry: path.resolve(__dirname, './src/main.js'),
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].js'
        },
        plugins: [
            new CleanWebpackPlugin() // 用于每次打包的时候将旧文件和缓存清除,也可以在打包配置文件里面手动清除打包输出目录内容：rm -rf ./dist
        ]
    }

5、在package.json的scripts添加如下脚本

"scripts": {
        "dev": "webpack --config ./webpack.config.js"
      }

执行npm run dev就可以在根目录下看到dist/js/main.js文件了

6、通过插件html-webpack-plugin实现自动构建，即将根目录下的index.html作为模板，打包到输出到dist目录下

安装插件html-webpack-plugin

npm i html-webpack-plugin -D

在webpack.config.js文件添加配置

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

在根目录下的index.html文件添加如下内容

<!DOCTYPE html lang="en">
        <head>
            <meta charset="UTF-8"></meta>
        </head>
        <body>
            <div id="root"></div>
        </body>
    </html>

在根目录下的src/main.js添加如下内容

let root = document.getElementById('root')
    root.textContent = 'hhhh'

执行打包命令npm run dev,点击dist/index.html在浏览器就可以看到效果

**引入vue3**

1、安装vue3，用vue@next才能引入vue3.x否则是vue2.x最高版本

npm i vue@next -S

2、在src下创建App.vue文件

<template>
      <div>
          jij
          <p>hhhhh</p>
          <p>hdjhsudhu</p>
      </div>
    </template>
    
    <script>
    export default {
        setup() {
            const testFn = () => {
                console.log('test')
            }
            return {
                testFn
            }
        }
    }
    </script>
    
    <style lang="scss" scoped>
        div{
            color: red;
            p{
                color: green;
            }
        }
    </style>

3、将该vue内容挂载到root根节点下，在src/main.js添加内容

import { createApp } from 'vue'
    import App from './App.vue'
    const app = createApp(App)
    app.mount('#root')

4、需要添加loader处理.vue文件：vue-loader( 安装时用vue-loader@next安装最新版本),@vue/compiler-sfc

vue-loader将.vue文件里面的template  script style内容提取出来交给相应的loader处理

@vue/compiler-sfc将.vue文件处理成ast

npm i -S vue-loader@next  @vue/compiler-sfc

在webpack.config.js添加如下内容

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const { VueLoaderPlugin } = require('vue-loader/dist/index')
    const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    
    module.exports = {
        mode: 'development',
        entry: path.resolve(__dirname, './src/main.js'),
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'js/[name].js'
        },
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    include: path.resolve(__dirname, './src'),
                    use: 'vue-loader'
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: path.resolve(__dirname, './index.html'),
                filename: 'index.html'
            }),
            new VueLoaderPlugin(),
            new CleanWebpackPlugin()
        ]
    }

5、添加css-loader style-loader处理.vue文件里面的style,项目用到sass，所以加上sass  sass-loader插件

npm i -D css-loader  style-loader sass-loader sass

module: {
            rules: [
    
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader'
                    ]
                },
                {
                    test: /\.scss$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader'
                    ]
                }
            ]
        },

6、babel-loader兼容ES6等语法

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

根目录下添加文件babel.config.js

module.exports = {
        presets: [
            "@babel/preset-env"
        ]
    }

**配置项devServer：不需要写完代码重新打包才能看到效果，实现项目内容实时更新，热更新,本地起的一个服务器**

npm i -D webpack-dev-server

在webpack.config.js添加如下配置

devServer: {
            contentBase: path.resolve(__dirname, './dist'),
            port: 8080,
            publicPath: '/'
        }

修改运行脚本

"scripts": {
        "dev": "webpack serve --progress --config ./webpack.config.js"
      }

**配置项devtool:将源代码和打包出来的代码位置关联上，具体可以参考官文：[https://v4.webpack.js.org/configuration/devtool/][https_v4.webpack.js.org_configuration_devtool]**

控制台有抛错的时候，可以看到未编译的代码和错误行数

如果是开发环境，即 mode: 'development'，用 devtool: 'cheap-module-eval-source-map' 比较好，
    如果是生产环境，即 mode: 'production'，用 devtool: 'cheap-module-source-map' 比较好

**file-loader    url-loader处理图片，字体等文件，未安装之前，在文件中引进图片会抛错**

安装插件：file-loader  url-loader

npm i file-loader  url-loader -S

在webpack.config.js里面书写配置

{
                    test: /\.(jpe?g|svg|png|bmp)$/,
                    use: [
                        {
                            loader: 'file-loader',
                            options: {
                                name: '[name].[ext]?[contenthash:8]', // 打包出来的文件名
                                outputPath: 'assets' // 打包输出路径
                            }
                        }
                        // {
                        //     loader: 'url-loader',
                        //     options: {
                        //         limit: 1024 * 10,
                        //         name: '[name].[ext]?[hash:8]'
                        //     }
                        // }
                    ]
                }

**tree-shaking**

注意：es6语法才支持tree-shaking；webpack4的`mode` 设置为 `production` ，即生产默认开启tree-shaking，同时消除了副作用；

副作用的意思：举个栗子，全局样式表或者全局配置的js文件------有些模块被导入就会对应用程序产生影响

具有副作用的的文件不能tree-shaking

开发和测试环境开启tree-shaking：需要配置.babelrc的\{module:false\} 和 package.json的\{sideEffects: false\}---无副作用，可以tree-shaking

// 导入并赋值给 JavaScript 对象，然后在下面的代码中被用到
    // 这会被看作“活”代码，不会做 tree-shaking
    import Stuff from './stuff';
    doSomething(Stuff);
    // 导入并赋值给 JavaScript 对象，但在接下来的代码里没有用到
    // 这就会被当做“死”代码，会被 tree-shaking
    import Stuff from './stuff';
    doSomething();
    // 导入但没有赋值给 JavaScript 对象，也没有在代码里用到
    // 这会被当做“死”代码，会被 tree-shaking
    import './stuff';
    doSomething();
    // 导入整个库，但是没有赋值给 JavaScript 对象，也没有在代码里用到
    // 被当做“活”代码，因为 Webpack 对库的导入和本地代码导入的处理方式不同
    // 在编写支持 tree-shaking 的代码时，导入方式非常重要，应该避免将整个库导入到单个 JavaScript 对象中，当你这样做时，是在告诉 Webpack 你需要整个库， Webpack 就不会摇它
    import 'my-lib';
    doSomething();

参考文章：[https://www.cnblogs.com/lzkwin/p/11878509.html][https_www.cnblogs.com_lzkwin_p_11878509.html]

[https_blog.csdn.net_fengmin_w_article_details_81984514]: https://blog.csdn.net/fengmin_w/article/details/81984514
[https_mp.weixin.qq.com_s_0qbefXeRuzlqTk4LySiUNw]: https://mp.weixin.qq.com/s/0qbefXeRuzlqTk4LySiUNw
[https_v4.webpack.js.org_configuration_devtool]: https://v4.webpack.js.org/configuration/devtool/
[https_www.cnblogs.com_lzkwin_p_11878509.html]: https://www.cnblogs.com/lzkwin/p/11878509.html