新手快速上手webpack4打包工具的使用

栏目: CSS · 发布时间: 5年前

内容简介：一直使用我们对每次打包后的缓存文件进行删除确保每次都是最新的

一直使用 webpack ,上次也分享过 webpack 配置 es6~9 的语法参考链接,但是对于一些小白童鞋来说,最基本的配置都不太知道,刚好利用春节休假期间对 webpack4 的知识点梳理一次。方便一些刚刚入行的人学习,也是对自己的一种总结与提高

一、几个盲点的解释

1、全局安装与局部安装
```
javascript
```
2、安装包的时候 --save 与 -D 的区别
一般我们仅仅是在开发环境依赖的包直接使用 -D 就可以,这样就会在项目的 package.json 文件中的 devDependencies 新增相关的配置信息
```
npm install webpack webpack-cli -D
复制代码
```
--save 是会放在 package.json 文件的 dependencies 中
记住 仅仅是开发环境需要使用的包 就使用 -D

二、 `webpack` 所谓的0配置使用

webpack 是基于配置的前端脚手架,在实际项目中开发需要配置你需要的插件与加载器。

1、 webpack 最基本的基重要的是:
plugins :配置插件的
module :主要配置一些加载器
2、初始化项目
创建一个文件夹 webpack-demo
初始化生成 package.json 文件
```
npm init --yes
复制代码
```

3、安装 webpack 最基本的依赖包

npm install webpack webpack-cli -D
复制代码

4、创建一个文件夹 src 并在里面创建一个 index.js 的文件
5、在命令行中运行(先忽视警告信息)
```
npx webpack
复制代码
```
6、在生成的 dist 文件夹下会生成一个大包好的 main.js 文件,在该文件夹下创建一个 index.html 文件引入 main.js ,在浏览器中查看控制台是否输出信息。

二、 `webpack` 的配置

1、在项目下创建一个 webpack.config.js 文件

2、可以配置的有

const path = require('path');

module.exports = {
  entry: '',  // 打包文件的入口
  output: {}, // 打包后的出口文件配置
  devServer: {}, // 开发服务器
  module: {}, // 模块配置
  plugins: {}, // 插件的配置
  mode: 'development', // ['development', 'production']模式
  resolve: {}, // 配置解析
}
复制代码

三、配置开发环境(在内存中打包)

1、安装包

npm install webpack-dev-server -D
复制代码

2、在 webpack.config.js 中配置入口文件与出口文件

module.exports = {
  entry: './src/index.js',  // 打包文件的入口
  output: {
    filename: 'build.js',
    // 注意这个位置必须是绝对路径
    path: path.join(__dirname, 'dist')
  },
  ...
}
复制代码

3、配置开发 devServer

module.exports = {
  ...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 8000,
    compress: true, // 自动压缩
    open: true, // 自动打开浏览器
  },
}
复制代码

4、在 package.json 中配置命令

...
"scripts": {
	"dev": "webpack-dev-server",
},
...
复制代码

5、调试性的运行命令(会自动打开浏览器,但是里面没任何信息展示)
```
npm run dev
复制代码
```

6、使用 html-webpack-plugin 自动生成 html 页面的插件

1.安装包

npm install html-webpack-plugin -D
复制代码

2.在 webpack.config.js 中引入

const HtmlWebpackPlugin = require('html-webpack-plugin');
复制代码

3.在 plugins 中配置

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html',
		title: 'webpack测试',
	})
],
复制代码

4.关于 index.html 的内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title><%=htmlWebpackPlugin.options.title%></title>
</head>

<body>

</body>

</html>
复制代码

5.关于 html-webpack-plugin 的配置请查看
6、运行 npm run dev 直接打开浏览器,打开控制台可以查看到打印信息

7、创建打包命令(在 package.json 中添加命令)

"scripts": {
	"dev": "webpack-dev-server",
	"build": "webpack"
},
复制代码

8、使用哈希值的方式创建随机生成数字,解决缓存的问题

1、对生成的 js 文件生成随机数

output: {
	filename: 'build.[hash].js', // 默认生成20位的哈希值
	// filename: 'build.[hash:8].js' 可以定制生成多少位的随机数
	// 注意这个位置必须是绝对路径
	path: path.join(__dirname, 'dist')
},
复制代码

2、对 html 里面引入的 js 生成哈希值(会生成 ?哈希值 )

plugins: [
	new HtmlWebpackPlugin({
		template: './src/index.html',
		title: 'webpack测试',
		hash: true,
	})
],
复制代码

3、运行命令 npm run build 可以查看 dist 文件夹下的文件是否带了尾巴( 注意点:要更新文件打包会生成新的,如果没改动文件,仅仅是多次打包是一样的 )

4、运行后的效果

<script type="text/javascript" src="build.1ac0ed4b.js?1ac0ed4bfca95df7576e"></script>	
复制代码

9、关于 html-webpack-plugin 其它常用的配置

new HtmlWebpackPlugin({
  ...
  minify: {
    removeAttributeQuotes: true, // 去除双引号
    collapseWhitespace: true, // 合并代码到一行
  }
})
复制代码

四、清除之前的 `plugin` 的插件的使用

我们对每次打包后的缓存文件进行删除确保每次都是最新的

1、安装

npm install clean-webpack-plugin -D
复制代码

2、在 webpack.config.js 中使用

const CleanWebpackPlugin = require('clean-webpack-plugin');
plugins: [
	new CleanWebpackPlugin(['./dist']),
	...
],
复制代码

五、关于 `webpack` 入口文件的几种方式

1、单一入口文件(参考上面)

2、多入口文件(可以写成一个数组),共同打包带一个出口文件中

module.exports = {
  mode: 'development',
  entry: [
    './src/index.js',
    './src/a.js'
  ],
  output: {
    filename: 'build.[hash:8].js',
    // 注意这个位置必须是绝对路径
    path: path.join(__dirname, 'dist')
  }
}
复制代码

3、多入口多出口多模板的模式

1.入口文件与出口文件的配置

module.exports = {
  mode: 'development',
  entry: {
    index: './src/index.js',
    a: './src/a.js'
  },
  output: {
    filename: '[name].[hash:8].js',
    path: path.join(__dirname, 'dist')
  }
}
复制代码

2.模板的配置(需要注明输出文件的名字)

...
plugins: [
    new CleanWebpackPlugin(['./dist']),
    new HtmlWebpackPlugin({
      filename: 'index.html', // 注明打包后的文件名
      template: './src/index.html',
      title: 'webpack测试1',
      hash: true,
      chunks: ['index']  // 注明选择哪个js文件
    }),
    new HtmlWebpackPlugin({
      filename: 'a.html',
      template: './src/index.html',
      title: 'webpack测试2',
      hash: true,
      chunks: ['a']
    })
  ],
}
...
复制代码

六、 `webpack` 热更新的使用

1、根据上面的方式我们可以实现,修改 js 代码浏览器会刷新,但是是类似我们人工的刷新(如果是有状态机的数据的时候会丢失数据)
2、我们可以使用 webpack 自带的一个热更新的插件

3、使用方式

1.在 webpack.config.js 中配置

const webpack = require('webpack');
...
plugins: [
    new webpack.HotModuleReplacementPlugin(),
    ...
]
...
复制代码

2.在主要的入口 index.js 文件中加上

if (module.hot) {
  module.hot.accept();
}
复制代码

七、配置加载 `css` 样式的

webpack 默认是支持 js 的,对于别的 css 或者 typescript 必须要安装加载器

1、安装包

npm install style-loader css-loader less less-loader -D
复制代码

2、在 webpack.config.js 中的 module 配置规则( use 中是一个数组,从后面解析到前面)

...
module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
        ]
      },
      {
        test: /\.less$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          { loader: 'less-loader' },
        ]
      }
    ]
  },
...
复制代码

3、在 src 中创建一个 css 的文件夹,里面创建 a.css 和 b.less 文件

4、在 index.js 中引入样式文件

import './css/a.css';
import './css/b.less';
复制代码

5、启动服务,查看浏览器 Elements 栏

八、抽取成单独的一个样式文件

上面的方式虽然可以加载样式文件,但是加载出来的全部的以 <style type="text/css">....</style> 的方式到页面中,增加了 js 文件的体积,如果项目大,可能会造成 js 文件过大加载慢,甚至加载不出的弊端。

1、抽取单独的 css 目前主要有2个包可以选择

extract-text-webpack-plugin@next
mini-css-extract-plugin

2、安装包

npm install extract-text-webpack-plugin@next mini-css-extract-plugin -D
复制代码

3、使用 extract-text-webpack-plugin@next 插件的方式

1.引包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
复制代码

2.修改 module 中的加载器

module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextWebpackPligin.extract({
          use: [
            { loader: 'css-loader' }
          ]
        })
      },
      {
        test: /\.less$/,
        use: ExtractTextWebpackPligin.extract({
          use: [
            { loader: 'css-loader' }, 
            { loader: 'less-loader' }
          ]
        })
      }
    ]
},
...
复制代码

3.使用插件

plugins: [
	...
	new ExtractTextWebpackPligin({
	  filename: 'css/index.css',
	}),
	new HtmlWebpackPlugin({
	  template: './src/index.html',
	  title: 'webpack测试',
	  hash: true,
	  // 先注释下面的代码,更好看结果
	  // minify: {
	  //   removeAttributeQuotes: true, // 去除双引号
	  //   collapseWhitespace: true, // 合并代码到一行
	  // }
	})
],
复制代码

4、在 index.js 中依然是导入 css 文件

import './css/a.css';
import './css/b.less';
复制代码

4、使用 mini-css-extract-plugin 插件方式

1.导包

const MiniCssTractPlugin = require('mini-css-extract-plugin');
复制代码

2.在 module 中配置

module: {
	rules: [
	  {
	    test: /\.css$/,
	    use: [
	      MiniCssTractPlugin.loader,
	      { loader: 'css-loader' }
	    ]
	  },
	  {
	    test: /\.less$/,
	    use: [
	      MiniCssTractPlugin.loader,
	      { loader: 'css-loader' }, 
	      { loader: 'less-loader' }
	    ]
	  }
	]
},
复制代码

3.配置插件

plugins: [
	...
	new MiniCssTractPlugin({
	  filename: 'css/css.css',
	}),
]
复制代码

4.一样的在 index.js 中导包
5.测试

九、抽取成多个单独的样式文件

1、导包

const ExtractTextWebpackPligin = require('extract-text-webpack-plugin');
复制代码

2、预先实例化两个输出文件的对象

const cssExtract = new ExtractTextWebpackPligin('css/a.css');
const lessExtract = new ExtractTextWebpackPligin('css/b.css');
复制代码

3、在 module 中预先实例化的对象

module: {
	rules: [
	  {
	    test: /\.css$/,
	    use: cssExtract.extract({
	      use: [
	        { loader: 'css-loader' }
	      ]
	    })
	  },
	  {
	    test: /\.less$/,
	    use: lessExtract.extract({
	      use: [
	        { loader: 'css-loader' }, 
	        { loader: 'less-loader' },
	      ]
	    })
	  }
	]
},
复制代码

4、配置插件

plugins: [
    cssExtract,
    lessExtract,
    ...
]
复制代码

5、运行命令 npm run build 查看

十、关于抽取样式修改后不刷新的问题(开发的时候依然是加上 `style` 中)

1.定义 disable

const cssExtract = new ExtractTextWebpackPligin({
  filename: 'css/a.css',
});
const lessExtract = new ExtractTextWebpackPligin({
  filename: 'css/b.css',
});
复制代码

2.在 modul 中使用

module: {
	rules: [
	  {
	    test: /\.css$/,
	    use: cssExtract.extract({
	      fallback: 'style-loader',
	      use: [
	        { loader: 'css-loader' }
	      ]
	    })
	  },
	  {
	    test: /\.less$/,
	    use: lessExtract.extract({
	      fallback: 'style-loader',
	      use: [
	        { loader: 'css-loader' }, 
	        { loader: 'less-loader' },
	      ]
	    })
	  }
	]
},
复制代码

十一、关于抽取的时候不引入未使用的样式来简单打包后的体积

1、安装包

npm install purifycss-webpack purify-css glob -D
复制代码

2、导入

const PurifycssWebpack = require('purifycss-webpack');
const glob = require('glob');
复制代码

3、使用

...
// 注意必须要在HtmlWebpackPlugin后面使用
new PurifycssWebpack({
  paths: glob.sync(path.resolve('src/*.html'))
})
...
复制代码

以上所述就是小编给大家介绍的《新手快速上手webpack4打包工具的使用》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Getting Real

Jason Fried、Heinemeier David Hansson、Matthew Linderman / 37signals / 2009-11-18 / USD 24.99

Getting Real details the business, design, programming, and marketing principles of 37signals. The book is packed with keep-it-simple insights, contrarian points of view, and unconventional approaches......一起来看看《Getting Real》这本书的介绍吧!

码农工具

新手快速上手webpack4打包工具的使用

一、几个盲点的解释

二、 `webpack` 所谓的0配置使用

二、 `webpack` 的配置

三、配置开发环境(在内存中打包)

四、清除之前的 `plugin` 的插件的使用

五、关于 `webpack` 入口文件的几种方式

六、 `webpack` 热更新的使用

七、配置加载 `css` 样式的

八、抽取成单独的一个样式文件

九、抽取成多个单独的样式文件

十、关于抽取样式修改后不刷新的问题(开发的时候依然是加上 `style` 中)

十一、关于抽取的时候不引入未使用的样式来简单打包后的体积

Getting Real

在线进制转换器

XML、JSON 在线转换

UNIX 时间戳转换

新手快速上手webpack4打包工具的使用

一、几个盲点的解释

二、 webpack 所谓的0配置使用

二、 webpack 的配置

三、配置开发环境(在内存中打包)

四、清除之前的 plugin 的插件的使用

五、关于 webpack 入口文件的几种方式

六、 webpack 热更新的使用

七、配置加载 css 样式的

八、抽取成单独的一个样式文件

九、抽取成多个单独的样式文件

十、关于抽取样式修改后不刷新的问题(开发的时候依然是加上 style 中)

十一、关于抽取的时候不引入未使用的样式来简单打包后的体积

Getting Real

在线进制转换器

XML、JSON 在线转换

UNIX 时间戳转换

二、 `webpack` 所谓的0配置使用

二、 `webpack` 的配置

四、清除之前的 `plugin` 的插件的使用

五、关于 `webpack` 入口文件的几种方式

六、 `webpack` 热更新的使用

七、配置加载 `css` 样式的

十、关于抽取样式修改后不刷新的问题(开发的时候依然是加上 `style` 中)