webpack简易配置

最新推荐文章于 2022-09-28 10:11:54 发布

赏花赏景赏时光

最新推荐文章于 2022-09-28 10:11:54 发布

阅读量205

点赞数

分类专栏：前端工具文章标签： webpack

原文链接：https://mp.weixin.qq.com/s/0qbefXeRuzlqTk4LySiUNw

版权

前端工具专栏收录该内容

19 篇文章 1 订阅

订阅专栏

webpack基础配置文章查考

1、https://blog.csdn.net/fengmin_w/article/details/81984514

2、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/

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

如果是开发环境，即 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

赏花赏景赏时光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack简易配置

webpack基础配置文章查考1、https://blog.csdn.net/fengmin_w/article/details/819845142、https://mp.weixin.qq.com/s/0qbefXeRuzlqTk4LySiUNw webpack4和vue3结合的基本配置搭建以下是整合多篇文章的基于webpack4和vue3的0搭建输出基础项目，便于查缺补漏配置webpack环境1、创建项目，并进入目录中生成package.json文件mkdir t...
复制链接

扫一扫