webpack配置项目

一、项目初始化

npm init -y
npm install --save-dev webpack
npm install webpack-cli -D

创建 webpack.config.js文件 在文件中输入代码：

let path=require("path")//引用node核心模块 => 路径
module.exports={
    mode:"production", //打包后文件模式 两种 => development production
    entry:'./src/index.js',//入口文件位置
    output:{
        filename:'bundle.[hash:8].js',  //文件名称
        path:path.resolve(__dirname,"dist"),//打包后的文件地址为绝对路径 名称为’dist'
        publicPath:''//给所有打包文件引入时加前缀，包括css、js、img，如果只想处理图片可以单独在url-loader配置中加publicPath
    }
}

运行：

npx webpack

【可选】在package.json文件中 ，添加脚本代码如下：

"scripts":{
    "build":"webpack --config webpack.config.my.js"//可以操作重命名后的webpack.config.js文件
}

运行：

npm run build

二、本地服务

使用简单的服务插件 webpack-dev-server, 在内存中启动

npm install webpack-dev-server -D

运行：

npx webpack-dev-server

[可选] 在webpack.config.js文件中添加服务代码：

devServer:{//开发服务器配置
    port:3000,//端口号
    progress:true,//是否显示进度条
    contentBase:'./dist',//服务器启动的位置
    open:true,//自动打开浏览器
    compress:true//gzip压缩
    hot:true//启动热更新
}

【可选】在package.json文件中加入代码：

"scripts":{
    "dev":"webpack-dev-server --open"//添加 --open 自动打开浏览器
 }

运行：

npm run dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9tnQ7kg3-1616136915365)(C:\Users\jfq\AppData\Roaming\Typora\typora-user-images\1614309130932.png)]

此报错解决方案：

npm uninstall -D webpack-cli
npm install -D webpack-cli@3

三、loader

  • loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）；
  • loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块

在webpack.config.js文件中配置代码：

module.exports = {
  module: {//模块
    rules: [//规则
      { test: /\.css$/, use: 'css-loader' }
    ]
 }
};

推荐使用yarn 进行安装

3.1 处理CSS

包括css less sass 必须在js文件中导入 import '.css’

3.1.1 处理css文件

1、安装 style-loader css-loader 模块

npm install style-loader css-loader -D

2、在webpack.config.js文件中配置代码：

//css-loader  用来解析@import这种语法
//style-loader 用来把css插入 header 标签中

//loader的执行顺序：默认是从右向左，从下向上

module.exports={
    module:{
        rules:[
        //{test:/\.css$/,use:['style-loader','css-loader']}//use可以写成string array object
        {
                test:/\.css$/,
                use:[{
                    loader:"style-loader",
                    options:{
                        insertAt:"top"//将css放到body上面；1.0版本已经放弃；现在不使用
                    }
                },
                "css-loader"
                ]
        }
        ]
    }
}

3.1.2 处理less文件

1、安装 style-loader css-loader less-loader 模块 和 less 模块

npm install style-loader css-loader less-loader -D

2、在webpack.config.js文件中配置代码：

module.exports={
    module:{
        rules:[
        {
                test:/\.less$/,
                use:[
                {
                    loader:"style-loader",
                },
                "css-loader",
                "less-loader"
                ]
        }
        ]
    }
}

3.1.3 处理sass文件

  1. 安装style-loader css-loader sass-loader 模块 和 sass 模块
  2. 用法跟less一样；

3.1.4 css兼容处理

1、安装 “postcss-loader autoprefixer” 模块

yarn add postcss-loader autoprefixer -D

2、postcss 需要配置文档 postcss.config.js

module.exports = {
    plugins: {
      // 兼容浏览器，添加前缀
      'autoprefixer':{
          overrideBrowserslist: [
            "Android 4.1",
            "iOS 7.1",
            "Chrome > 31",
            "ff > 31",
            "ie >= 8"
            //'last 10 versions', // 所有主流浏览器最近10版本用
        ],
        grid: true
      }
    }
}

3、在 “webpack.config.js”文件中添加配置：

// css
{
  test: /\.css$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader'
  ]
}
// less
{
  test: /\.less$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
    'less-loader'
  ]
},

3.2 处理JS

3.2.1 ESLint语法检测

npm install eslint-config-airbnb-base eslint-plugin-import eslint eslint-loader -D

webpack.config.js中配置

/*
eslint语法检查：eslint-loader eslint
注意：只检查自己的js代码，第三方的库是不用检查的
设置检查规则：
packag.json中eslintConfig中设置~
   "eslintConfig":{
       "extends":"airbnb-base"
    }
aribnb --> eslint-config-airbnb-base eslint-plugin-import eslint
*/
{
   test:/\.js$/,
   exclude:/node_modules/,
   loader: 'eslint-loader',
   options:{
      fix:true//eslint自动修复格式错误
   }
}

3.在package.json中配置eslintConfig

"eslintConfig": {
    "extends": "airbnb-base"
  }

4.如果配置完成后，打包时出现Resolve error: unable to load resolver “node” src\main.js:1:1 错误，请安装下面的依赖后再打包

npm install eslint-import-resolver-node -D

3.2.2 JS兼容处理

因为es6语法不兼容部分浏览器，所以要对项目进行配置

1.安装依赖

npm install babel-loader @babel/preset-env @babel/core core-js -D //第一三方法安装这个
npm install  @babel/polyfill -D //第二个方法安装这个

2.三种方法兼容

（1）babel-loader @babel/preset-env @babel/core 兼容

​ 只能兼容基本的语法，但是像是promise语法，无法进行兼容

（2）兼容全部js语法 @babel/polyfill

在index.js中引入依赖即可

import '@babel/polyfill’

缺点：全部兼容造成打包文件太大

（3）core-js 配合第一种进行按需兼容

3.配置详情（下面是将eslint检查与js兼容配置放在了一起，module中不可以对.js文件(同一种文件)进行多次匹配，多次匹配只会匹配第一个，所以要结合在一起）

{
    test:/\.js$/,
    exclude:/node_modules/,
    use:[
 //要优先执行eslint-loader，可使用配置enforce:'pre'　
        {
            loader: 'eslint-loader',
            options:{
                fix:true//eslint自动修复格式错误
            }
        },
        //js兼容性处理：babel-loader @babel/preset-env @babel/core
        {
            loader: 'babel-loader',
            options:{
                //预设：指示babel做怎么样的兼容性处理
                presets:[
                    [
                        '@babel/preset-env',
                        {
                            // 按需加载
                            useBuiltIns: 'usage',
                            // 指定core-js版本
                            corejs: {
                                version: 3,
                            },
                            // 指定兼容浏览器版本范围
                            targets: {
                                chrome: '70', // 谷歌版本70及以上
                                firefox: '62',
                                ie: '9',
                                safari: '10',
                                edge: '17',
                            }
                        }
                    ]
                ]
            }
        }
    ]
},

所以一般采用第一种加第三种组合进行.js文件兼容，也就是上面贴的代码。

第二种具体引入方式如下，不建议使用

{
      test:/\.js$/,
      exclude:/node_modules/,
      loader:'babel-loader',
      options:{
           presets:['@babel/preset-env']
      }
}

3.3 处理其他文件

3.2.1 处理路径

  1. 安装 file-loader 插件 可以处理 图片、字体等
npm install --save-dev file-loader
  1. 在webpack.config.js文件中添加代码配置：
 module.exports = {
    module: {
      rules: [
        {
         test: /\.(png|svg|jpg|gif)$/,  //图像的格式，也可以判断字体文件/\.(woff|woff2|eot|ttf|otf)$/
         use: [
          'file-loader'
         ]
        }
      ]
    }
  };

*解析html中的img 如

yarn add html-loader -D

{
  test: /\.html$/,
  use: 'html-loader'
}

3.2.2 当图片小于多少，用base64编码

yarn add url-loader -D

//如果过大，才用file-loader
{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 200 * 1024,          // 小于200k变成base64
    }
  }
}

3.2.3 打包分类

1.图片分类

{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 1,  // 200k 200 * 1024
      outputPath: 'img/'   // 打包后输出地址 在dist/img
    }
  }
},

2.css分类

plugins: [
  new MiniCssExtractPlugin({
    filename: 'css/main.css'
  }),
]

3.希望输出的时候，给这些css、img加上前缀，传到服务器也能访问:

output: {
  filename: 'bundle.[hash:8].js',   // [hash:8] 只显示8位hash
  path: path.resolve(__dirname, 'dist'),
  publicPath: 'http://www.mayufo.cn'  // 给静态资源统一加
},

如果只处理图片路径：

{
  test: /\.(png|jpg|gif)$/,
  // 当图片小于多少，用base64,否则用file-loader产生真实的图片
  use: {
    loader: 'url-loader',
    options: {
      limit: 1,  // 200k 200 * 1024
      outputPath: '/img/',   // 打包后输出地址
      publicPath: 'http://www.mayufo.cn'
    }
  }
}

四、插件[plugins]

4.1html-webpack-plugin

使用'html-webpack-plugin’插件自定义打包html文件

npm install html-webpack-plugin -D

在webpack.config.js文件中，添加配置代码：

const htmlWebpackPlugin = require('html-webpack-plugin')//引入插件

plugins:[//放置所有的webpack插件
    new htmlWebpackPlugin({//用于使用模板打包时生成文件
        template:'',//模板文件
        filename:'',//打包后生成的文件
        hash:true,//添加hash值解决缓存问题
        minify:{
            removeAttributeQuotes:true,//删除属性双引号
            collapseWhitespace:true//折叠空行变为一行
        }
    })
]

4.2 mini-css-extract-plugin

抽离css样式，成单独文件

npm install mini-css-extract-plugin -D

在webpack.config.js中配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 压缩css

module.exports={
    plugins: [
      new MiniCssExtractPlugin({
          filename: 'css/main.css'//输出文件名
      })
    ],
    module:{
        rules:[
            {
              test: /\.css$/,   // css 处理
              use: [
                // {
                //     loader: 'style-loader',
                // },
                // 此时不需要style-loader
                MiniCssExtractPlugin.loader,   // 抽离
                'css-loader', // css-loader 用来解析@import这种语法,
                'postcss-loader'
              ]
            }
        ]
    }
}

4.3 压缩css，js代码

yarn add optimize-css-assets-webpack-plugin -D
yarn add uglifyjs-webpack-plugin -D

2、在webpack.config.js文件中配置代码：

// 用了`mini-css-extract-plugin`抽离css为link需使用`optimize-css-assets-webpack-plugin`进行压缩css,使用此方法压缩了css需要`uglifyjs-webpack-plugin`压缩js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")//压缩css
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")//压缩js

module.exports = {
  optimization: {              // 优化项
    minimizer: [
      new UglifyJsPlugin({     // 优化js
        cache: true,           // 是否缓存
        parallel: true,        // 是否并发打包
        // sourceMap: true     // 源码映射 set to true if you want JS source maps
      }),
      new OptimizeCSSAssetsPlugin({})    // css 的优化
    ]
  },
  mode: 'production',
  entry: '',
  output: {},
}

五、配置优化项

5.1 模块热更新（HMR）

只存在于开发环境，哪块更新只更新那块

  • 配置热更新，在devServer中配置hot，开启HMR功能
 devServer:{
        contentBase: resolve(__dirname,'build'),//自动构建目录，打包后的文件夹
        compress:true,
        port:3000,
        open:true,
        hot:true//开启热更新
    }

此时样式文件已经可以实现热更新，因为style-loader内部实现了,但是js和html文件会出现问题。

（1）解决html文件问题，将entry改为数组，引入index.html文件，

html文件：默认不能使用HMR功能，同时会导致问题：html文件不能热更新(不用做HMR功能)

 entry:['./src/index.js','./src/index.html'],

（2）解决js文件问题，配置js文件

js文件：默认不能使用HMR功能 --需要修改js代码，添加支持，入口js文件是没法处理的，这里处理非入口的print.js文件

import print from './print'

print();

if(module.hot){
    //一旦 module.hot 为true,说明开启了HMR功能。 -->让HMR功能代码失效
    module.hot.accept('./print.js',function(){
        //方法会监听 print.js文件变化，一旦发生变化，其他模块不会重新打包构建。
        //会执行后面的回调函数
        print();
    })
}

5.2调试工具（devtool）

利于代码调试，显示报错准确行数；

devtool: 'source-map'  //cheap-module-souce-map

参数介绍

/**
 * source-map :一种提供源代码到构建后代码的映射技术（如果构建后代码出错，可以通过映射追踪源代码错误）
 * [inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
 *
 * source-map:外部
 *  错误代码准确信息 和 源代码的错误位置
 * inline-source-map:内联
 * 错误代码准确信息 和 源代码的错误位置
 * 只生成一个内联source-map
 * hidden-source-map:外部
 * 错误代码的错误原因，但是没有错误位置
 * 不能追踪源代码错误，只能提示到构建后代码的错误位置
 * eval-source-map:内联
 * 每个文件都生成对应的source-map，都在eval
 * 错误代码准确信息 和 源代码的错误位置
 * nosources-source-map:外部
 * 能找到错误代码的准确信息，但是没有任何源代码信息
 * cheap-source-map:外部
 * 提示错误信息，和源代码的错误位置，但是只能精确到某一行
 * cheap-module-source-map
 * 错误代码准确信息 和 源代码的错误位置
 * module会将loader的source map加入
 *
 * 内联 和 外部的区别：1.外部生成了文件，内联没有  2.内联构建速度更快
 *
 * 开发环境：速度快，调试更友好
 *   速度快(eval>inline>cheap>...)
 *      eval-cheap-source-map
 *      eval-source-map
 *   调试更友好
 *      souce-map
 *      cheap-module-source-map
 *      cheap-source-map
 *
 *    --> eval-source-map 调试更友好/  eval-cheap-module-source-map 性能更好
 *
 * 生产环境：源代码要不要隐藏？调试要不要更友好
 *    内联会让代码体积变的非常大，所以在生产环境中不使用内联
 *    nosources-source-map 代码全部隐藏
 *    hidden-source-map 只隐藏源代码，会提示构建后代码错误信息
 *
 *    -->source-map / cheap-module-souce-map
 */

react项目中devtool配置如下

devtool: isEnvProduction
      ? shouldUseSourceMap
        ? 'source-map'
        : false
      : isEnvDevelopment && 'cheap-module-source-map',

5.3 提高匹配效率 oneOf

提高loader匹配效率，使用方法如下，匹配到一个loader后，后面的就不会再继续匹配了。

注意：不能有两个配置处理同一种类型文件
module:{
        rules:[
            {
                test:/\.js$/,
                exclude:/node_modules/,
                // //优先执行
                enforce:'pre',
                loader:'eslint-loader',
                options:{
                    fix:true
                }
            },
            {
                //下面的loader只会匹配一个，处理性能更好
                //注意：不能有两个配置处理同一种类型文件
                oneOf:[
                    {
                        test:/\.css$/,
                        use:[...commenCssLoader]
                    },
                    {
                        test:/\.less$/,
                        use:[...commenCssLoader,'less-loader']
                    },
                ]
            }
        ]
    },

5.4 babel缓存

不用重新加载所有的文件，用户第二次进入页面的时候直接读取缓存

  1. 在匹配.js文件的loader中写入配置cacheDirectory
{
    test:/\.js$/,
    exclude:/node_modules/,
    loader:'babel-loader',
    options:{
        presets:[
            [
                '@babel/preset-env',
                {
                    useBuiltIns:'usage',
                    corejs:{version:3},
                    targets:{
                        chrome:'70',
                        firefox:'62',
                        ie:'9',
                        safari:'10',
                        edge:'17',
                    }
                }
            ]
        ],
        //开启babel缓存
        //第二次构建时，会读取之前的缓存
        cacheDirectory:true
    }
},
  1. 给输出的js文件还有css文件设置打包输出名称
output:{
filename:'js/build.[contenthash:10].js',
path:resolve(__dirname,'build')
},
 new MiniCssExtractPlugin({
filename:'css/build.[contenthash:10].css'
}),

配置详情

/**
 * babel缓存
 *   cacheDirectory:true
 * 文件资源缓存
 *   hash:每次webpack构建时会生成一个唯一的hash值。
 *      问题：因为js和css同时使用一个hash值。
 *        如果重新打包，会导致所有缓存失效。(可能只改变了一个文件)
 *   chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk,那么hash值就一样
 *      问题：js和css的hash值还是一样的。因为css是在js中被引用的，两个同属一个chunk
 *   contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样
 */

5.5 tree shaking（树摇）

去除无用代码(未使用的代码)

自动开启条件：

  1. 必须使用es6模块化。
  2. 开启mode:production环境。
  3. 在package.json中配置sideEffects
/**
  * tree shaking（树摇）:
  * 去除无用代码(未使用的代码)
  * 自动开启条件：1.必须使用es6模块化。2.开启mode:production环境。
  * 作用:减少代码体积
  *
  * 在package.json中配置
  * "sideEffects":false 所有代码都没有副作用 （都可以进行tree shaking）
  *   问题：可能会把css/ @babel/polyfill (副作用)文件干掉
  *   解决：
  *     "sideEffects":["*.css"]
  */

六、打包多页应用

// 多入口
let path = require('path')；
let HtmlWebpackPlugin = require('html-webpack-plugin')；

module.exports = {
  mode: 'development',
  entry: {
    home: './src/index.js',
    other: './src/other.js'
  },
  output: {
    filename: "[name].js",
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'home.html',
      chunks: ['home']
    }),
    new HtmlWebpackPlugin({
      template: './index.html',
      filename: 'other.html',
      chunks: ['other', 'home']   // other.html 里面有 other.js & home.js
    }),
  ]
}

来源：https://www.icode9.com/content-4-897351.html

赞 (0)

相关推荐

  • Webpack最详解

    WEB前端开发社区 昨天 JavaScript模块打包的概念已经出现一段时间了.RequireJS在2009年首次发声,之后Browserify粉墨登场.接着各种打包工具如雨后春笋纷纷涌现.而webp ...

  • webpack之性能优化（webpack4）

    在讲解性能优化的方案之前,我们需要了解一下webpack的整个工作流程, 方案一:减少模块解析 也就是省略了构建chunk依赖模块的这几个步骤 如果没有loader对该模块进行处理,该模块的源码就是最 ...

  • 配置CLion管理Qt项目国际化支持

    随着Qt 6的发布,cmake也正式宣告接管qmake的工作了. 在之前的一篇博客里我介绍了如何使用cmake管理你的qt项目,不过有一点我没有讲,那就是对国际化(i18n)的处理. 今天我们就来介绍 ...

  • log4j 动态配置，重启项目配置失效问题

    公司项目升级之后,成功去掉了log4j.properties配置文件,实现页面动态配置日志级别. 很经典的两个配置,但是最终还是随着时代的进步而被优化,最终弄成了可配置项 但是随之问题就来了,当我启动 ...

  • 【java框架】Spring(3) -- Spring配置补充(基于Maven项目)

    【java框架】Spring(3) -- Spring配置补充(基于Maven项目)

  • Qt Creator 项目属性配置常用设置 | My Code

    设置编译后目标保存目录 DESTDIR = bin 设置一些编译过程中临时文件目录 MOC_DIR = tmp/moc OBJECTS_DIR = tmp/obj UI_DIR = tmp/ui RC ...

  • 风机高340米！配置61台20MW海上风电机组，这个项目将引领大风机时代！

    北极星风力发电网独家获悉,近日,挪威一家新能源开发商Zephyr公布了一个GW以上的大型海上风电场项目计划,该项目将同时使用固定底基和浮动平台,计划采用两种风机配置方案. 第一种是是采用61台海上风电 ...

  • 一个完整的网络项目，如何根据需求配置交换机?值得收藏学习！

    通过实例来详细讲解一个完整的网络项目从规划到交换机配置的详细过程. 一.案例要求拓扑图 小型园区中,分为两个部门,每个部门相互独立,却又通信,进行组网如下图. 二.分析 在拿到项目后,首先的就是对项目 ...

  • 物业项目员工配置定岗定编标准

    物业管理公司机构的设置根据管理的需要而定,管理及专业技术人员的配备以建筑面积10万平方米计算,大致为:多层房屋配6人,高层大楼配8人,不足建筑面积10万平方米的不少于5人. 一.多层住宅物业管理人员的 ...

  • 12 手写配置启动一个 vue2 项目

    目录 学习 vue2.0 还有没有意义? 手动创建项目,添加 vue 插件 关于版本号 准备工程化编译,建造必须的文件 package.json 页面模板 public/index.html App. ...

  • 配置管理的目标，控制配置变更，标志项目在时间点上的配置

    在信息系统项目开发的过程中,项目配置管理非常重要.本文,解读项目配置管理中的那点事. 一.配置项的状态 包括:草稿(配置项初建时其状态).通过评审后,状态变为正式,如果有修改需求,状态变为修改.修改完 ...