webpack配置

2021-12-24 14:09:43

使用 react-app-rewired

安装 react-app-rewired

npm install react-app-rewired --save-dev

项目根目录创建 `onfig-overrides.js`

/* config-overrides.js */
module.exports = function override(config, env) {
  //do stuff with the webpack config...
  return config;
}

进入`package.json` 修改命令

  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
    "eject": "react-scripts eject"
}

在onfig-overrides.js文件里添加webpack配置

使用`react-app-rewire-less`添加Less

react-app-rewire-less传送门

react.js javascript

更多相关内容

webpack配置es6+less开发环境
2017-11-17 19:13:08

此为本人制作的webpack开发环境，使用babel进行代码转换，postcss进行兼容性，可以使用less进行css预编译，欢迎测试

收起
webpack-chain：链接API，用于生成和简化Webpack配置的修改
2021-02-06 02:33:15

Webpack链使用链接API生成并简化Webpack 2-4版配置的修改。该文档对应于webpack-chain的v6。对于以前的版本，请参阅： ... webpack-chain尝试通过提供可链接或流利的API来创建和修改Webpack配置来改进此过程。

收起
详解基于vue-cli优化的webpack配置
2021-01-21 11:56:12

关于原始webpack配置大家可以看下这篇文章vue-cli#2.0 webpack配置分析,文章基本对于文件每行代码都做了详细的解释，有助于更好的理解webpack。仔细总结了一下，自己的优化基本还是网上流传的那几点通过 ...

收起
webpack配置文件.zip
2020-04-15 10:05:19

自动构建vue脚手架的webpack配置文件，包括三个文件package.json、package-lock.json、webpack.config.js，使用说明在文件里面的webpack.config.js里面，

收起
webpack配置文件和常用配置项介绍
2021-01-02 10:13:37

1、安装webpack 1.全局安装webpack：npm install...2、webpack配置文件介绍 1.webpack需要配置文件webpack.config.js，手动的创建于项目根目录中就ok。一个项目可以设置多个配置文件，每个都可以有不同的功能。 2.webpa

收起
WebPack-VS:Visual Studio 2015友好的WebPack配置+各种Webpack配置
2021-05-18 10:17:56

WebPack VS Visual Studio 2015友好的WebPack配置+额外的Noob指南#Super Duper Extra Mega Street积分 systemfault [a.k.a rcyr] // freenode - #web (For explaining to me how these tools actually function)

收起

JavaScript
ljas-webpack:用于webpack配置组合的webpack配置部件
2021-05-25 21:05:24

要将定制的webpack配置与这些部分组合在一起，您应该将它们与。预期的构图策略在SurviveJS Webpack书中的“构图上进行了描述，该书是由前Webpack核心团队成员JuhoVepsäläinen编写的。执照该项目是。

收起
webpack-config-reload:热加载 webpack 配置。修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-...
2021-05-05 07:48:11

修改 webpack 相关配置文件后，自动重启脚本命令，比如 dev-server，比较方便的是在调试 webpack 繁琐的配置时候，省去一遍遍地 Ctrl+c 和重复输入命令。注意：只支持 webpack/webpack-dev-server 两个命令。安装...

收起
vue入门——webpack配置
千次阅读 2022-03-19 08:23:33
除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件： const { VueLoaderPlugin } = require('vue-loader') module.exports = { ......
搭建vue需要了解webpack。

1. npm init。

新建一个webpack_demo的目录，在该目录使用此命令初始化一个package.json管理安装包。执行后会有一堆问题，默认回车即可，这样就在根目录得到一个package.json的文件，内容如下
```
{
  "name": "webpack_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}
```
2. npm install webpack webpack-dev-server

使用该命令安装webpack和webpack服务器，执行完毕之后，在package.json中会增加webpack和webpack-dev-server依赖。webapck-dev-server会启动一个web服务器，并可以热加载。
```
"dependencies": {
    "webpack": "^5.70.0",
    "webpack-dev-server": "^4.7.4"
}
```
3. index.html文件和main.js文件

在根目录新建index.html和main.js文件，index.html作为服务器入口，main.js作为webapck打包入口。
```
index.hmtl

<!DOCTYPE html>
<html>
    <head>
        <title>起步</title>
        <meta charset="utf-8">
    </head>
    <body>
        <div id="app">
            Hello World
        </div>
        <script src="./main.js"></script>
    </body>
</html>
```
4. webpack.config.js

在根目录新建一个webpack.config.js文件，并做如下配置。完成后运行 npm webpack serve就能启动服务器了。恭喜你，webpack环境已经搭建好了。
```
module.exports = {
    entry: './main.js', //webpack打包入口
    devServer: {
        static: './'  // webpack服务器访问入口
    },
    mode: 'development', // 开发模式
}
```
其实这里只需要配置devServer这个就可以让服务器启动了，但是entry和mode不配的话会有相应的报错，可以自行注释掉之后尝试。

在main.js中写入如下代码，保存后，可以看到浏览器内容直接变了，说明服务器热加载已经启用了。
```
document.getElementById('app').innerHTML = 'hello vue';
```
5. 安装babel

为了使用ES6语法，需要安装babel-loader，执行下面命令，可以直接安装babel对应的loader，必须babel-loader和@babel/core一起安装，才能保证版本相匹配。
```
npm install --save-dev babel-loader @babel/core
```
在webpack.config.js中配置babel-loader
```
{
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}
```
新建一个babel.config.json，里面写上，并运行命令 npm install @babel/preset-env --save-dev
```
babel.config.json

{
  "presets": ["@babel/preset-env"]
}


命令行
npm install @babel/preset-env --save-dev
```
这样就配置好babel-loader了。打开main.js写一段ES6代码
```
document.getElementById('app').innerHTML = 'hello vue';

let str = 'vue.js';
console.log(str);
```
保存后，可以看到控制台打印出vue.js证明babel-loader配置起效了。

6. 安装vue、vue-loader、vue-templare-compiler

这里安装vue 2，对应vue-loader 15 ，对于vue-template-compiler 2。
```
npm install vue@2 vue-loader@15 vue-template-compiler@2 --save-dev
```
7.配置vue-loader

Vue Loader 的配置和其它的 loader 不太一样。除了通过一条规则将 vue-loader 应用到所有扩展名为 .vue 的文件上之外，请确保在你的 webpack 配置中添加 Vue Loader 的插件：
```
const { VueLoaderPlugin } = require('vue-loader')
module.exports = {
    ...
    module: {
        ...
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader'
          }
        ],
    },
    plugins: [
      // 请确保引入这个插件！
      new VueLoaderPlugin()
    ],
}
```
这个插件是必须的！ 它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。

8. 安装 css-loader、vue-style-loader
```
npm install css-loader vue-style-loader
```
到此vue的所有配置都安装完成了，写一段vue代码。

9. 运行vue代码

在mian.js中敲入下面代码
```
import Vue from 'vue';

let app = new Vue({
    el: '#app',
    data: {
        message: 'vue.js',
    }
})
console.log(app.message)
```
运行npm run dev，会发现报错了

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not
available. Either pre-compile the templates into render functions, or use the compiler-
included build.

这是因为在vue 2 中，默认 npm 包导出的是运行时构建，即 runtime 版本，不支持编译 template 模板。可以看vue的package.json文件中，main字段
```
"main": "dist/vue.runtime.common.js",
```
而真正可以用的是vue.js文件，可以支持编译template。

这里我们有两种方法解决这个问题，一种是在导入时写明vue引用.
```
import Vue from 'vue/dist/vue.js';
```
一种是在webpack.config.js别名配置中配置vue别名
```
resolve: {
   // alias创建 import 或 require 的别名，来确保模块引入变得更简单
   alias: {
     vue: 'vue/dist/vue.js', 
   }
},
```
修改完毕之后，再次运行npm run dev，就可以看到正常的页面了。

10. 编写.vue文件并运行

在根目录新建App.vue文件，敲入下面代码
```
<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
  font-size: 24px;
}
</style>
```
在main.js里面修改代码
```
import Vue from 'vue';
import App from './App.vue';

let app = new Vue({
    el: '#app',
    render: h => h(App),
})
```
运行npm run dev 可以看到.vue文件也正常运行了。

到此，vue 2的环境算是初步搭建完成了，后续有其他需求，继续配置安装即可。

最后，如果遇到包版本不匹配的情况，就在package.json里面看一下对应的依赖版本是多少，下载对应版本的包即可。比如vue2 对应vue-loader15-，vue3对应vue-loader16+等等。

参考网站：

babel: Babel 中文网 · Babel - 下一代 JavaScript 语法的编译器

webpack: 起步 | webpack 中文网解析(resolve) | webpack 中文网

vue-loader: 起步 | Vue Loader
收起
展开全文
vue vue.js
webpack-config-utils:帮助您简化webpack配置的实用工具
2021-05-25 20:27:59

帮助您简化webpack配置的实用工具问题 Webpack配置是一个JavaScript对象，它具有极好的声明性。但是，在创建配置对象的过程中，webpack配置文件很容易变成命令式的混乱。这个解决方案该项目的目的是提供实用...

收起

JavaScript

vue-cli3搭建项目之webpack配置

千次阅读 2022-01-24 17:43:22

vue-cli3搭建项目之webpack配置 一、vue.config.js文件 const path = require('path') module.exports = { publicPath: './', // 基本路径 outputDir: 'dist', // 输出文件目录 lintOnSave: false, // eslint-...

vue-cli3搭建项目之webpack配置

一、vue.config.js文件

const path = require('path')

module.exports = {
  publicPath: './', // 基本路径
  outputDir: 'dist', // 输出文件目录
  lintOnSave: false, // eslint-loader 是否在保存的时候检查
  // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
  // webpack配置
  chainWebpack: (config) => {
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }
    Object.assign(config, {
      // 开发生产共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages')
        } // 别名配置
      }
    })
  },
  productionSourceMap: false, // 生产环境是否生成 sourceMap 文件
  // css相关配置
  css: {
    extract: true, // 是否使用css分离插件 ExtractTextPlugin
    sourceMap: false, // 开启 CSS source maps?
    loaderOptions: {
      css: {}, // 这里的选项会传递给 css-loader
      postcss: {} // 这里的选项会传递给 postcss-loader
    }, // css预设器配置项 详见https://cli.vuejs.org/zh/config/#css-loaderoptions
    modules: false // 启用 CSS modules for all css / pre-processor files.
  },
  parallel: require('os').cpus().length > 1, // 是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建。
  pwa: {}, // PWA 插件相关配置 see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
  // webpack-dev-server 相关配置
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0', // 允许外部ip访问
    port: 8022, // 端口
    https: false, // 启用https
    overlay: {
      warnings: true,
      errors: true
    }, // 错误、警告在页面弹出
    proxy: {
      '/api': {
        target: 'http://www.baidu.com/api',
        changeOrigin: true, // 允许websockets跨域
        // ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    } // 代理转发配置，用于调试环境
  },
  // 第三方插件配置
  pluginOptions: {}
}

二、优化打包chunk-vendors.js文件体积过大
chunk-vendors.js这个文件非常大，那是因为webpack将所有的依赖全都压缩到了这个文件里面，这时我们可以将其拆分，将所有的依赖都打包成单独的js
方案一：利用splitChunks将每个依赖包单独打包，在生产环境下配置，代码如下

configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production'
      // 将每个依赖包打包成单独的js文件
      let optimization = {
        runtimeChunk: 'single',
        splitChunks: {
          chunks: 'all',
          maxInitialRequests: Infinity,
          minSize: 20000, // 依赖包超过20000bit将被单独打包
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name (module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`
              }
            }
          }
        }
      }
      Object.assign(config, {
        optimization
      })
    } else {
      // 为开发环境修改配置...
      config.mode = 'development'
    }
    Object.assign(config, {
      // 开发生产共同配置
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src'),
          '@c': path.resolve(__dirname, './src/components'),
          '@p': path.resolve(__dirname, './src/pages')
        } // 别名配置
      }
    })
  }

方案二、利用DllPlugin和DllReferencePlugin将依赖包打包成外部文件在index中引入
1.在package.json中新建library,用于存储即将要打包的依赖包名和打包后的文件名

{
    ...
    "name": "demo-cli3",
  	"version": "1.0.0",
    "version_lib": "1.0.0",
    "library": {
       "lib_v1_0": [
           "jquery/dist/jquery.min.js"
        ],
        "vueBucket_v1_2": [
           "vue-router",
           "vuex"
        ]
    },
    ...
}

2.创建webpack.dll.config.js文件，代码如下
const path = require('path')
const webpack = require('webpack')
const {library} = require('./package.json')
// const assetsSubDirectory = process.env.NODE_ENV === 'production'
//   ? build.assetsSubDirectory : dev.assetsSubDirectory
let { version_lib } = require('./package.json');
version_lib = version_lib.replace(/\./g,'_');
module.exports = {
  entry: library,
  output: {
    path: path.resolve(__dirname, './libs/package/js'),
    filename: `[name].${version_lib}.dll.js`,
    library: '[name]_library'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  optimization:{
    minimizer:[
      new UglifyPlugin({
        uglifyOptions: {
          warnings: false,
          compress: {
            drop_console: true, // console
            drop_debugger: false,
            pure_funcs: ['console.log'] // 移除console
          }
        }
      })
    ]
  },
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|en-gb/),
    new webpack.DllPlugin({
      path: path.resolve(__dirname, './libs/package/json', '[name].manifest.json'),
      name: '[name]_library',
      context: process.cwd()
    })
  ]
}

3.在vue.config.js中配置DllReferencePlugin

let { version, version_lib , openGzip,library } = require('./package.json');
...
module.exports = {
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production';
      ...
      Object.assign(config, {
        ...
        plugins:[
          ...config.plugins,
          ...Object.keys(library).map(name => {
            return new webpack.DllReferencePlugin({
              context: process.cwd(),
              manifest: require(`./libs/package/json/${name}.manifest.json`),
            })
          })
        ]
      });
      ...
    } else {
      // 为开发环境修改配置...
      config.mode = 'development';
    }
    ...
  },
}
...

4.将打包好的js自动添加进index.html中
下载add-asset-html-webpack-plugin

npm install --save-dev add-asset-html-webpack-plugin
在vue.config.js中配置add-asset-html-webpack-plugin
const webpack = require('webpack');
const path = require('path');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
...
module.exports = {
   ...
   configureWebpack: (config) => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      config.mode = 'production';
        ...
      Object.assign(config, {
        ...
        plugins:[
          ...
          new AddAssetHtmlPlugin(Object.keys(library).map(name => {
            return {
              filepath: require.resolve(path.resolve(`libs/package/js/${name}.${version_lib}.dll.js`)),
              outputPath: 'static/lib/js',
              publicPath:'./static/lib/js',
              includeSourcemap: false
            }
          })),
        ]
      });
      ...
    } else {
      // 为开发环境修改配置...
      config.mode = 'development';
    }
    ...
  },
  ...
}

收起

展开全文

vue.js

webpack-serve：获取您的webpack配置并创建带有热模块重载和错误覆盖的开发服务器
2021-01-30 00:36:42

进行webpack配置，并创建具有热模块重载和错误覆盖的开发服务器。旨在类似于您从获得的体验。安装 npm install --save-dev @unfold/webpack-serve 用法在终端在项目的根目录下运行$(npm bin)/webpack-serve ，...

收起
webpack-config：帮助加载，扩展和合并webpack配置
2021-02-06 04:50:46

webpack配置帮助加载，扩展和合并Webpack配置安装npm install webpack-config --save-dev 要么yarn add webpack-config --dev产品特点 #extend() -帮助使用本地文件或可共享配置扩展配置 #merge() -帮助将某些值合并...

收起

vue03-webpack配置

2022-02-15 21:22:26

webpack：静态模块打包器除了合并代码, 还可以翻译和压缩代码 less/sass -> css ES6/7/8 -> ES5 ...webpack-使用前-准备 ...3、在package.json中, 配置scripts(自定义命令) scripts: { "build": "w...

webpack.config.js中添加服务器配置

webpack.config.js

webpack：静态模块打包器

除了合并代码, 还可以翻译和压缩代码

less/sass -> css

ES6/7/8 -> ES5

webpack-使用前-准备

1、初始化包环境

yarn init -y

2、安装依赖包

yarn add webpack@5.31.2 webpack-cli@4.6.0 -D

3、在package.json中, 配置scripts(自定义命令)

scripts: {
	"build": "webpack"
}

webpack插件

自动生成html插件

1、下载插件

yarn add html-webpack-plugin@5.3.1  -D

2、webpack.config.js配置

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin') 

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html' 
        })
    ]
}

webpack加载器

webpack-加载器-处理css文件

wenpack不能识别css文件, webpack默认只识别js文件

1、安装依赖

yarn add css-loader@5.2.1 style-loader@2.0.0  -D

2、webpack.config.js 配置

module.exports = {
    // ...其他代码
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
          {
            test: /\.css$/, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

webpack-加载器-处理less文件

1、less文件需要引入到webpack入口文件main.js处

import "./less/index.less"

2、下载依赖包

yarn add less@4.1.1 less-loader@8.1.0 -D

3、webpack.config.js 配置

module: {
  rules: [ 
    // ...省略其他
    {
    	test: /\.less$/, // 匹配.less结尾文件
    	// 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
        use: [ "style-loader", "css-loader", 'less-loader']
    }
  ]
}

webpack-加载器-处理图片文件

在css/less 文件中使用图片

body{
    background: url(../assets/logo_small.png) no-repeat center;
}

在src/main.js 中把图片插入到创建的img标签上, 添加body上显示

// 引入图片-使用
import imgUrl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)

1、webpack.config.js填写

module: {
    rules: [ 
        // ...省略其他
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
        }
    ]
}

webpack-加载器-图片处理区别

小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)

module: {
    rules: [ 
        // ...省略其他
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
            // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
            // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
        }
    ]
}

webpack-加载器-处理字体文件

在入口main.js引入iconfont.css

// 引入字体图标文件
import './assets/fonts/iconfont.css'

在htm中l使用字体图标样式

<i class="iconfont icon-weixin"></i>

1、webpack.config.js

{ 
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    type: 'asset/resource',  // 当做静态资源直接复制文件
    generator: {
    	filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
    }
}

webpack-加载器-处理高版本js语法

让webpack, 对高版本js语法降级例如：箭头函数

src/main.js - 编写箭头函数

const fn = () => { // 高级语法
  console.log("你好babel");
}
console.log(fn) // 一定打印函数, 才会被webpack把"函数体"打包起来

1、安装包

yarn add -D babel-loader@8.2.2 @babel/core@7.13.15 @babel/preset-env@7.13.15

2、webpack.config.js 配置规则

module: {
    rules: [
        {
            test: /\.js$/, // 匹配js结尾文件
            exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
            use: { 
                loader: 'babel-loader', // 使用加载器-处理
                options: {
                    presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }
    ]
}

webpack自动更新打包变化的代码

1、下载包

yarn add webpack-dev-server@3.11.2 -D

2、package.js配置自定义命令serve

scripts: {
	"serve": "webpack serve"
}

3、运行命令-启动webpack开发服务器

yarn serve
#或者 npm run serve