浅谈webpack构建工具配置和常用插件总结

Z时代
2024-01-10
分类：综合

webpack构建工具已经火了好几年，也是当下狠火狠方便的构建工具，我们没有理由不去学习。既然选择webpack就要跟着时代走，我们要追随大牛的步伐，大牛等等我。

一、webpack基础

在根目录使用npm init 命令创建package.json，创建过程中一路回车。

本地安装webpack命令：npm install webpack webpack-cli --save-dev 安装成功后写入package.js的devDependencies中，可以通过 npm node_modules/.bin/webpack -v 命令查看它的版本。

全局安装npm install -g webpack 不推荐全局安装 webpack。它会把你的项目锁定全局安装的版本，也可能导致不同的webpack版本中构建失败。

静态资源文件目录

– webpack.config.js [ webpack配置文件 ]

– package.json [ NPM包管理配置文件 ]

– node_modules [ 项目中的依赖存放目录 ]

二、webpack.config.js

const webpack = require('webpack');

module.exports = {

mote:"development",//指当前的环境

development：开发环境

production:生产环境

none:不做任何处理

//入口文件，如果需求多个入口可改为对象

entry: './src/index.js',

hot配置是否启用模块的热替换功能，devServer的默认行为是在发现代码被改后通过自动刷新整个页面来做到事实预览，然后设置hot后，

会在不刷新整个页面的情况下用新模块替换老模块来做到实时更新。

如果选用hot：true方式来达到热更新的效果需要引用webpack.HotModuleReplacementPlugin插件配合达到你需要的效果，另外推荐一

种简便的方式在package.json中scripts设置如下

"scripts": {

"start": "webpack-dev-server --hot --inline",

// 服务器环境

devServer: {

hot: true, //建议使用第二种方案启动服务使用命令 npm run start

port:"8080",//端口默认8080,可以自行设置

host:"192.168.xx.xx",

host配置devServer服务监听的地址，也可以使用localhost进行访问浏览器输入192.168.xx.xx/index.html

简便方法在package.json中设置如下

"scripts": {

"start": "webpack-dev-server --hot --inline ",

//插件

plugins: [

//热加载插件

new webpack.HotModuleReplacementPlugin(),

//输出

output: {

//filename：输出的文件名，可以自定义一些规则

filename: '[name].bundle.js',

//path，配置输出文件存放在本地的目录

path: path.resolve(__dirname, 'dist')

}

};

三、插件

1、HtmlWebpackPlugin

const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [

new HtmlWebpackPlugin({ // 打包输出HTML

title: 'Hello World',//文件的标题

minify: { //minify 的作用是对 html 文件进行压缩

removeComments: true, // 移除HTML中的注释

collapseWhitespace: true, // 删除空白符与换行符

minifyCSS: true, // //是否压缩html里的css 默认值false；

caseSensitive: true, //是否对大小写敏感，默认false

ollapseWhitespace: true, //是否去除空格，默认false

minifyJS: true, //是否压缩html里的js

removeAttributeQuotes: true, //是否移除属性的引号默认false

removeComments: true, //是否移除注释默认false

emoveCommentsFromCDATA: true, //从脚本和样式删除的注释默认false

emoveEmptyAttributes: true, //是否删除空属性，默认false

removeRedundantAttributes: true, //删除多余的属性

removeScriptTypeAttributes: true, //删除script的类型属性，在h5下面script的type默认值：text/javascript 默认值false

filename: 'index.html', //输出的html的文件名称

template: 'index.html', //html模板在的文件路径

hash: true,//hash作用是给生成的js文件一个独特的hash值，默认值为false 被构建过后的html引用js效果如下

// <script type=text/javascript src=bundle.js?22b9692e22e7be37b57e></script>

}),

]

2、CleanWebpackPlugin


const { CleanWebpackPlugin } = require('clean-webpack-plugin');
plugins: [
  //该插件主要用于自动删除webpack里dist目录中已不需要的文件
  new CleanWebpackPlugin()
]

官方介绍：

By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild

3、ExtractTextWebpackPlugin

先把我们需要的东西下载好

npm install webpack css-loader style-loader extract-text-webpack-plugin --save-dev

首先配置webpack，先不使用插件完成


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

配置好之后在js入口文件中引入样式文件，打包查看打包结果bundle.js，会发现css被打包到了js里面，以字符串的形式存在。如果index.html中已引入打包后的bundle.js，使用浏览器打开index.html文件会发现css以style的形式被插到了head当中。

2.使用插件


const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 module : {
  rules: [
    {
      test: /\.css$/,
      use : ExtractTextPlugin.extract({
       fallback: "style-loader",
        use: "css-loader"
      })
    }
    /*
  use: 指需要什么样的loader去编译文件
  fallback: 编译后用什么loader来提取css文件
  */
   ]
 },
 plugins: [
   new ExtractTextPlugin("styles.css"),
   new HtmlWebpackPlugin({ // 关于HtmlWebpackPlugin上文有提到
      title: 'extract-text-webpack-plugin',
      filename: 'index.html',
      template: path.resolve(__dirname, 'index.html'),
      inject : 'head'
    })
 ]
}