精华内容
下载资源
问答
  • webpack配置
    2021-12-24 14:09:43

    使用 react-app-rewired

    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传送门

    更多相关内容
  • 此为本人制作的webpack开发环境,使用babel进行代码转换,postcss进行兼容性,可以使用less进行css预编译,欢迎测试
  • Webpack链 使用链接API生成并简化Webpack 2-4版配置的修改。 该文档对应于webpack-chain的v6。 对于以前的版本,请参阅: ... webpack-chain尝试通过提供可链接或流利的API来创建和修改Webpack配置来改进此过程。
  • 关于原始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里面,
  • 1、安装webpack 1.全局安装webpack:npm install...2、webpack配置文件介绍 1.webpack需要配置文件webpack.config.js,手动的创建于项目根目录中就ok。一个项目可以设置多个配置文件,每个都可以有不同的功能。 2.webpa
  • 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)
  • 要将定制的webpack配置与这些部分组合在一起,您应该将它们与。 预期的构图策略在SurviveJS Webpack书中的“构图上进行了描述,该书是由前Webpack核心团队成员JuhoVepsäläinen编写的。 执照 该项目是。
  • 修改 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

    展开全文
  • 帮助您简化webpack配置的实用工具 问题 Webpack配置是一个JavaScript对象,它具有极好的声明性。 但是,在创建配置对象的过程中,webpack配置文件很容易变成命令式的混乱。 这个解决方案 该项目的目的是提供实用...
  • 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';
        }
        ...
      },
      ...
    }
    
    展开全文
  • 进行webpack配置,并创建具有热模块重载和错误覆盖的开发服务器。 旨在类似于您从获得的体验。 安装 npm install --save-dev @unfold/webpack-serve 用法 在终端 在项目的根目录下运行$(npm bin)/webpack-serve ,...
  • 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-使用前-准备

    webpack插件

    webpack加载器

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

    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

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

    module.exports = {
        // ...其他配置
        devServer: {
          port: 3000, // 端口号
          open: true // 启动后自动打开浏览器
        }
    }

    webpack.config.js

    const path = require("path")
    
    // 引入自动生成 html 的插件
    const HtmlWebpackPlugin = require('html-webpack-plugin') 
    
    module.exports = {
      entry: "./src/main.js", // enter: 默认入口
      devServer: {
        port: 3000, // 端口号
        open: true // 启动后自动打开浏览器
      },
      mode: 'development',
      output: {
        path: path.join(__dirname, "dist"), // 出口"文件夹"名
        filename: "bundle.js"               // 出口"文件"名
      },
      plugins: [
        new HtmlWebpackPlugin({
            // 以此为基准生成打包后html文件
            template: './public/index.html' 
        })
    ],
    module: { // 如何处理项目中不同模块文件
      rules: [ // 规则
        {
          test: /\.css$/, // 匹配所有的css文件
          // use数组里从右向左运行
          // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
          // 再用 style-loader 将样式, 把css插入到dom中
          use: [ "style-loader", "css-loader"]
        },
        {
        	test: /\.less$/, // 匹配.less结尾文件
        	// 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
            use: [ "style-loader", "css-loader", 'less-loader']
        },
        {
          test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
          type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
        type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
        // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
        // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
    },
    { 
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      type: 'asset/resource',  // 当做静态资源直接复制文件
      generator: {
        filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
      }
    },
    // js降级
    {
      test: /\.js$/, // 匹配js结尾文件
      exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
      use: { 
          loader: 'babel-loader', // 使用加载器-处理
          options: {
              presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
          }
      }
    }
      ]
    }
    
    }
    展开全文
  • Webpack配置 可共享的Webpack配置 介绍 我的前端项目的个人共享Webpack配置。 您可以使用自己的配置添加和/或覆盖默认设置。 特征 加载JavaScript,TypeScript,CSS,Sass,字体和图像文件 开发构建的优化默认值 ...
  • webpack-starter-config 使用babel,sass和webpack-dev-server进行简单的webpack配置。 Js和CSS将在生产模式下最小化。开发模式npm start在这种模式下,*。css和* .js将从/ public文件夹中删除。生产方式npm run ...
  • react修改webpack配置,添加别名

    千次阅读 2022-04-25 19:06:41
    通过 npm run eject 直接暴露出来react所有的webpack配置文件,暴露出来之后,过程不可逆 而且失去了 react-scripts 的统一管理的好处,而且react的webpack中的内容也非常的多,更改起来也不太容易 第二种方式 通过...
  • webpack配置entry详解

    千次阅读 2022-04-10 15:19:20
    entry:入口起点 支持三种格式: 1、string,单入口 entry: './src/index.js' 打包形成一个chunk,输出一个bundle文件,此时chunk的名称默认是main ...2、array:多入口 ...entry: ['./src/index.js', './src/add.js'...
  • 实用工具可帮助您模块化Webpack配置 关于get-webpack-config get-webpack-config是一组轻量级实用程序,可帮助您模块化Webpack配置。 您可以将您的webpack配置分解为更易于理解和维护的小型模块化配置,然后将...
  • webpack配置module详解

    2022-04-10 16:09:45
    module: { rules: [ // loader配置 { test: '/\.css$/', // 多个loader用use use: ['style-loader', 'css-loader'] }, { test: '/\.js$/', // 单个loader用loader loa.
  • 随着现在typescript使用越来越多,作为打包工具界的webpack怎么编译typescript呢? 下面我把自己的实践记录一下,成功编译了typescript文件,并且引入typescript模块后,也可以成功编译。 我们从新建webpack项目开始...
  • ciro-maciel-Webpack配置 用于开发应用程序的webpack配置 这是我们在ciro-maciel.me上用于前端项目的共享配置。 它使用编译JavaScript。 它还配置为向文件名添加哈希,以方便缓存。 入门 通过NPM安装此软件包和...
  • Webpack配置 Bamdad Sabbagh的webpack配置 供应商 配置。 npm 软件包。 安装 yarn add --dev @bamdadsabbagh/webpack-config 用法 { " start " : " cross-env NODE_ENV=development webpack-dev-server --config ...
  • 实际开发中我们都需要使用构建工具对代码进行打包,TS同样也可以结合构建工具一起使用,今天我们以webpack为例介绍一下如何结合构建工具使用TS。
  • 用webpack同时开发PC站、手机站的webpack配置.zip 用webpack同时开发PC站、手机网站的webpack配置.zip 一个配置文件,可同时用于PC平台,手机平台
  • webpack配置文件的抽离

    2022-04-26 10:40:39
    webpack.config.js文件的抽离
  • webpack配置静态资源

    2022-01-11 13:41:55
    webpack打包静态资源
  • webpack配置output详解

    2022-04-10 15:57:18
    output: { // 文件名称,可指定目录 filename: 'js/[name].js', // 输出文件目录,将来所有资源输出的公共目录,所有资源都在此文件夹下 ... // 设置非入口chunk的名称(入口chunk就是entry配置的文件, .
  • create-react-app 生成的项目看不到 webpack 相关的配置文件,需要先暴露出来,使用如下命令 npm run eject 修改配置文件: webpack.config.js //把一个路径或路径片段的序列解析为一个绝对路径 path.resolve(_...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 167,181
精华内容 66,872
关键字:

webpack配置

友情链接: SVM classifier.rar