使用webpack包管理工具

其他 2018-11-10 16:40:25 阅读次数: 0

一 : 最简单的使用webpack的方法

一、全局安装 webpack-cli 脚手架

npm install webpack-cli -g

二、新建一个项目wp，并在wp目录下初始化一个package.json文件。

npm init -y

三、安装webpack到项目中

将webpack加入到pageage.json配制文件中，使用以下命令：

$ npm install --save-dev webpack
  • 1

此时再看package.json文件，对比package.json刚刚创建时，新增加了一段代码。 
这里写图片描述

在wp目录下新建一个src目录，并在该目录下新建一个index.js 作为入口文件 
这里写图片描述

webpack4.x 给我们提供了两种打包模式：

development 为开发模式 
production 为生产模式，打包出的 main.js 代码自动压缩

我们可以直接使用命令 webpack --mode development 进行开发模式打包 
这里写图片描述 
这里写图片描述
我们使用生产模式webpack --mode production 打包 
这里写图片描述
此时代码已经被压缩。

不管哪种模式，我们每次打包都使用 webpack --mode development 或者 webpack --mode production 都有点麻烦，我们可以修改下package.json文件里面的 scripts 属性：

"dev": "webpack --mode development", 
"build: "webpack --mode production"

最后我们就可以使用 npm run dev 进行开发模式打包，使用 npm run build 进行生产模式打包。

webpack.config.js

const path = require("path");
module.exports = {
    entry:  ["./src/index.js","./src/index2.js" ], //入口文件，若不配置webpack4将自动查找src目录下的index.js文件
    output: {
        filename: "[name].js",//输出文件名，[name]表示入口文件js名
        path: path.join(__dirname, "dist")//输出文件路径
    }
}

package.json

{
  "name": "testWebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.22.0"
  }
}

二 : webpack打包进阶

前言：

webpack4出了以后，一些插件变化很大，和之前的版本使用方式不一样，新手入坑，本篇将介绍如何从一开始配置webpack4的开发版本，对css，js进行编译打包合并生成md5，CSS中的图片处理，js自动注入html页，删除指定文件，提取公共文件，热更新等等。

安装

 

  1. //全局安装

  2. npm install -g webpack webpack-cli

创建文件夹初始化

 //创建文件夹

mkdir webpack4demo

//进入

cd webpack4demo

//初始化

npm init -y

创建文件夹scripts 里面创建index.js文件

index.js

 const s=()=>{

console.log('s init')

}

s()

创建webpack.config.js文件

webpack.config.js

 const path = require("path");

module.exports = {

entry: {

index: "./scripts/index.js" //入口文件，若不配置webpack4将自动查找src目录下的index.js文件

},

output: {

filename: "[name].bundle.js",//输出文件名，[name]表示入口文件js名

path: path.join(__dirname, "dist")//输出文件路径

}

}

执行webpack --mode development将会生成dist/index.bundle.js

创建index.html，并引入js

 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>$Title$</title>

</head>

<body>

$END$

</body>

<script src="./dist/index.bundle.js"></script>

</html>

打开浏览器将会看到之前设置的js文件生效

对css，js进行编译打包合并生成md5

创建a.js，c.js，a.css，更改index.js

a.js

 import acss from './a.css'

import c from './c.js'

const a={

init(){

console.log("a init bbbaaa")

},

cinit(){

c.init()

}

}

export default a;

c.js

 const c={

init(){

console.log("ccccc")

}

}

export default c;

a.css

 body{

background-color: #6b0392;

}

index.js

 import a from './a.js'

import c from './c.js'

const s=()=>{

a.init()

a.cinit()

c.init()

console.log('s init')

}

s()

配置webpack.config.js文件

 const path = require("path");

module.exports = {

entry: {

index: "./scripts/index.js"

},

output: {

filename: "[name].bundle.[hash].js",//[hash]会在后面生成随机hash值

path: path.join(__dirname, "dist")

},

module: { // 处理对应模块

rules: [

{

test: /\.css$/,

use: [ 'style-loader', 'css-loader' ]//处理css

}

]

},

}

安装style-loader， css-loader

npm install style-loader css-loader --save-dev

执行webpack --mode development将会看到一个带md5值得js文件，将他引入html中

CSS中的图片处理

安装url-loader, file-loader

npm install url-loader file-loader --save-dev

修改a.css 将一张图片放到scripts目录

 

  1. body{

  2. background-image: url("./timg.jpg");

  3. background-color: #a748ca;

  4. }

配置webpack.config.js文件

 

  1. module: {

  2. rules: [

  3. {

  4. test: /\.css$/,

  5. use: [ 'style-loader', 'css-loader' ]

  6. },

  7. {

  8. test:/\.(png|jpg|gif)$/,

  9. use:[{

  10. loader:'url-loader',

  11. options:{

  12. outputPath:'images/',//输出到images文件夹

  13. limit:500 //是把小于500B的文件打成Base64的格式，写入JS

  14. }

  15. }]

  16. }

  17. ]

  18. },

执行webpack --mode development将会看到dist中有一个images文件夹中有一张图片，打开index.html

js自动注入html文件

使用插件html-webpack-plugin，可以将生成的js自动引入html页面，不用手动添加

 

  1. //安装html-webpack-plugin

  2. npm install html-webpack-plugin --save-dev

  3. //安装webpack webpack-cli

  4. npm install webpack webpack-cli --save-dev

配置webpack.config.js文件

 

  1. const path = require("path");

  2. const HtmlWebpackPlugin = require('html-webpack-plugin');//引入html-webpack-plugin

  3. module.exports = {

  4. entry: {

  5. index: "./scripts/index.js"

  6. },

  7. output: {

  8. filename: "[name].bundle.[hash].js",

  9. path: path.join(__dirname, "dist")

  10. },

  11. module: {

  12. rules: [

  13. {

  14. test: /\.css$/,

  15. use: [ 'style-loader', 'css-loader' ]

  16. }

  17. ]

  18. },

  19. plugins: [// 对应的插件

  20. new HtmlWebpackPlugin({ //配置

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

  22. template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件

  23. }),

  24. ]

  25. }

执行webpack --mode development 记得要讲之前手动引入的script删除，便可以看到dist那里自动生成一个index.html，打开便可以看到。

删除指定文件

使用插件clean-webpack-plugin，删除指定文件，更多配置，查看clean-webpack-plugin

npm install clean-webpack-plugin --save-dev

配置webpack.config.js文件

 

  1. const CleanWebpackPlugin = require('clean-webpack-plugin');//引入

  2. plugins: [// 对应的插件

  3. new HtmlWebpackPlugin({ //配置

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

  5. template: './index.html',//以当前目录下的index.html文件为模板生成dist/index.html文件

  6. }),

  7. new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录

  8. ]

执行webpack --mode development，可以看到dist目录被删除，又生成一个新的dist，之前的js文件已经被删除。

提取公共文件

我们可看到a.js和index.js都引入了c.js文件，为什么要提取公共代码，简单来说，就是减少代码冗余，提高加载速度。和之前的webpack配置不一样：

 

  1. //之前配置

  2. // new webpack.optimize.SplitChunksPlugin({

  3. // name: 'common', // 如果还要提取公共代码,在新建一个实例

  4. // minChunks: 2, //重复两次之后就提取出来

  5. // chunks: ['index', 'a'] // 指定提取范围

  6. // }),

  7. //现在配置

  8. optimization: {

  9. splitChunks: {

  10. cacheGroups: {

  11. commons: { // 抽离自己写的公共代码

  12. chunks: "initial",

  13. name: "common", // 打包后的文件名，任意命名

  14. minChunks: 2,//最小引用2次

  15. minSize: 0 // 只要超出0字节就生成一个新包

  16. },

  17. vendor: { // 抽离第三方插件

  18. test: /node_modules/, // 指定是node_modules下的第三方包

  19. chunks: 'initial',

  20. name: 'vendor', // 打包后的文件名，任意命名

  21. // 设置优先级，防止和自定义的公共代码提取时被覆盖，不进行打包

  22. priority: 10

  23. },

  24. }

  25. }

  26. },

下载jq npm install jquery --save 在a.js，index.js引用 import $ from 'jquery' 输出$

生成3个js文件，执行webpack --mode development

热更新，自动刷新

我们将用到webpack-dev-serve，webpack-dev-server就是一个基于Node.js和webpack的一个小型服务器，它有强大的自动刷新和热替换功能。

安装webpack-dev-serve

npm install webpack-dev-serve --save-dev

配置webpack.config.js文件

 

  1. const webpack = require("webpack");

  2. plugins: [

  3. new HtmlWebpackPlugin({

  4. filename: 'index.html',

  5. template: './index.html',

  6. }),

  7. new CleanWebpackPlugin(['dist']), //传入数组,指定要删除的目录

  8. // 热更新，热更新不是刷新

  9. new webpack.HotModuleReplacementPlugin()

  10. ],

  11. devServer: {//配置此静态文件服务器，可以用来预览打包后项目

  12. inline:true,//打包后加入一个websocket客户端

  13. hot:true,//热加载

  14. contentBase: path.resolve(__dirname, 'dist'),//开发服务运行时的文件根目录

  15. host: 'localhost',//主机地址

  16. port: 9090,//端口号

  17. compress: true//开发服务器是否启动gzip等压缩

  18. },

配置package.json

 

  1. "scripts": {

  2. "dev": "webpack-dev-server --mode development"

  3. },

执行npm run dev 访问 http://localhost:9090/

随便修改任一文件便会自动刷新网站显示修改相应内容。

总结：

webpack4还有很多很多配置，例如css的拆分呀，less sass配置呀，js编译es6呀，多入口配置呀，生产环境配置，js没有使用的模块自动检测剥离等等，只能等下次有空在总结，感谢大家的观看，新手入坑，欢迎指出错误的地方。

猜你喜欢

转载自blog.csdn.net/Byte_Dance/article/details/83272699
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022