webpack4.x安装和命令行，配置等
1. 使用npm初始化
D:\>mkdir webpack-tsetD:\>cd webpack-tsetD:\webpack-tset>npm init成功之后结果如下：
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See `npm help json` for definitive documentation on these fields and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and save it as a dependency in the package.json file.
中文翻译为：
这个实用程序将引导您创建package.json文件。它只覆盖最常见的项目，并试图猜测合理的默认值。
有关这些字段的最终文档，请参阅“npm help json”，以及他们所做的。
在安装包之后使用'npm install<pkg>--save'，然后将其作为依赖项保存在package.json文件中。
- 全部选择默认项
Press ^C at any time to quit. //随时按^C退出。
package name: (webpack-tset)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\webpack-tset\package.json:
{
"name": "webpack-tset",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes)2.安装webpack
- webpack 4.x 后需要安装webpack-cli ，请注意需要安装在同一目录
D:\webpack-tset>npm install webpack --save-dev //安装webpack
D:\webpack-tset> npm install -g webpack-cli //全局安装webpack-cli,(如果之前没有安装的话)
D:\webpack-tset> npm install --save-dev webpack-cli //同步到局部项目文件夹下成功之后结果如下：
3.使用webpack打包文件
- 使用IDE打开这个文件夹，并在文件夹下新建hello.js文件，在hello.js里写一个函数
- 打包hello.js文件，格式：webpack 文件名称 -o 文件打包完后的名称：
D:\webpack-tset> webpack hello.js -o hello.bundle.js打包完成
- 引入另一个新建的worl.js文件再打包
现在变成了两个模块
4.在js文件里面引入css文件，并打包
打包前需要安装css-loader
D:\webpack-tset> npm install css-loader style-loader --save-dev安装完成后，新建一个style.css文件，在hello.js文件里引入style.css
执行打包命令：
这时变成了三个模块
5.在网页中展示效果
- 新建一个index.html文件，并修改hello.js文件
再执行一次打包hello.js文件
打开index.html文件
此时hello.js的函数先被执行,执行完成后style.css的样式才生效
再看一下index.html文件的结构
style-loarder负责在html文件中插入style标签
- 用命令行指定css-loader
首先删除在hello,js文件中引入的css-loader
执行命令：
D:\webpack-tset> webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader'- 文件更新自动打包
D:\webpack-tset> webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader' --watch- 查看打包进度，打包模块，打包原因
D:\webpack-tset> webpack hello.js -o hello.bundle.js --module-bind 'css=style-loader!css-loader' --progress --display-modules --display-reasons6.webpack配置文件及打包
webapck4.x之后，配置文件path必须为绝对路径
然后执行命令：
D:\webpack-demo> webpack --mode development //打包成未压缩模式此时dist文件夹下多出了一个bundle.js文件，打包完成
- 指定配置文件
D:\webpack-demo> webpack --config a.js //a.js为配置文件- 自定义npm命令脚本
在package.json文件的scripts的属性里里添加:
完成后执行命令：
D:\webpack-demo> npm run webpack7.webpack配置的entry，output new
通过在 webpack 配置中配置 entry 属性，来指定多个入口起点起点：
这是entry的属性值由字符串变成了数组
执行自定义的打包命令：
可以看到此时打包了两个文件，再看看打包后的bundle.js文件:
在entry中定义多个chunk：
这种方式适合多页面应用，这是打包后的输出文件应该区分开来，从而避免打包覆盖，在输出里重新定义filename的属性值：
可以使用name-chunkhash.js格式来区分打包后的文件名
执行打包命令
打包后生成了两个不同名称的文件
8.自动化生成项目中的html页面
-
安装插件
npm install html-webpack-plugin --save-dev安装完成后再配置文件中建立对插件的引用
const htmlWebpckPlugin=require('html-webpack-plugin')在plugins中初始化：
plugins:[
new htmlWebpckPlugin({
template:'index.html' //根目录
}), //初始化
]-
在模板中引用配置参数
首先安装html加载器html-loader:
npm i html-loader --save-dev配置参数：
plugins:[
new htmlWebpckPlugin({
title:'webpack is good'
}), //初始化
]在模板中引用：
<%= htmlWebpackPlugin.options.title%>打包后可以看到title值已经取到
- js模板语法
<body>
<% for ( const key in htmlWebpackPlugin.files) { %>
<%=key %>:<%=JSON.stringify(htmlWebpackPlugin.files[key])%>
<%}%>
</div>打包后显示结果为：
- 根据模板引擎自定义引入的文件
打包后结果为：
- 设置一个上线的路径
通过对publicPath占位符的设置：
打包后引用的文件路径前会被publicPath来插入
其他一些配置：
plugins:[
new htmlWebpckPlugin({
minify:{
removeComments:true,//删除注释
collapseWhitespace:false,//删除空格 和压缩打包的区别
}
}), //初始化
]