webpack4.0 全篇详解
1、初识webpack
官网图解:css
1.1 什么是webpack
webpack 是一个现代 JavaScript 应用程序的静态模块打包工具：它作的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并生成一个或多个 bundle，将其打包为合适的格式以供浏览器使用html
webpack构建：前端
构建就是把源代码转化成线上浏览器可执行的JavaScript、CSS、HTML等代码
复制代码
主要有以下7个操做：vue
1.代码转换：TypeScript 编译成 JavaScript、SCSS或Less 编译成 CSS 等。
2.文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
3.代码分割：提取多个页面的公共代码、提取首屏不须要执行部分的代码让其异步加载。
4.模块合并：在采用模块化的项目里会有不少个模块和文件，须要构建功能把模块分类合并成一个文件。
5.自动刷新：监听本地源代码的变化，自动从新构建、刷新浏览器,nodemon。
6.代码校验：在代码被提交到仓库前须要校验代码是否符合规范，以及单元测试是否经过。
7.自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。
复制代码
如图示:node
构建实际上是工程化、自动化思想在前端开发中的体现，把一系列流程用代码去实现，让代码自动化地执行这一系列的流程。构建给前端开发注入了更大的活力，解放了咱们的生产力,更加方便了咱们的开发。webpack
1.2 什么是webpack模块
与 Node.js模块 相比，webpack _模块_可以以各类方式表达它们的依赖关系。下面是一些示例:git
- ES2015
import语句 - CommonJS
require()语句 - AMD
define和require语句 - css/sass/less 文件中的
@import语句。 - 样式(
url(...))或 HTML 文件(<img src=...>)中的图片连接
经过 loader，webpack 能够支持以各类语言和预处理器语法编写的模块. 详情查看官网webpack模块es6
2、webpack项目的基本搭建
2.1 搭建webpack环境
- Node.js安装 Node官网
Mac OSX系统安装Node的流程:github
安装Homebrew：web
Homebrew简称brew，是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件
打开终端,执行如下命令安装Homebrew:
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
复制代码
Node安装：
打开终端,执行如下命令安装node: brew install node
查看版本,检查是否安装成功: node -v npm -v
复制代码
Cnpm安装：
因为npm走的是国外网络，比较慢容易出现安装失败的现象,因此能够切换成国内的镜像资源:
cnpm和npm用法一致, 只是使用过的是国内的淘宝镜像,效率会比npm高不少
打开终端,执行如下命令安装cnpm:
npm install cnpm -g --registry=https://registry.npm.taobao.org
查看版本,检查是否安装成功: cnpm -v
复制代码
2.2 webpack项目初始化配置
在桌面上新建一个webpack-simple-project. 并使用终端(terminal),在其路径下新建package.json文件:
1. mkdir webpack-simple-project
2. npm init 或者 cnpm init. // 所有回车点击
3. npm init -y 或者 cnpm init -y. //-y 会 默认全部的配置
复制代码
package.json基本结构:
{
"name": "webpack-simple-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
复制代码
在这个文件中, 咱们能够在 "scripts" 脚本命令中,来配置咱们经常使用的脚本命令,例如:
{
...
...
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",//npm run build 启动咱们的webpack,生产环境
"dev": "webpack --mode development",//npm run dev 启动咱们的webpack,生产环境
},
...
...
}
复制代码
2.3 安装webpack
- 全局安装
通常不建议全局安装，防止两个不一样项目引用了webpack的不一样版本，就会出现版本不统一运行不起来的状况，须要卸载掉当前版本安装对应版本，就会比较麻烦。
npm install webpack webpack-cli -g
或者
cnpm install webpack webpack-cli -g
复制代码
- 局部项目安装
npm install webpack webpack-cli --save-dev
或者
cnpm install webpack webpack-cli --save-dev
复制代码
本项目采用局部安装，在4.0以后，webpack和webpack-cli已分开，须要单独安装
1. cd webpack-simple-project 路径下
2. npm install webpack webpack-cli --save-dev
3. npx webpack -v //查看版本号
4. npm info webpack //查看对用包的详细信息
//能够安装指定版本包（例子）
npm install webpack@4.16.1 webpack-cli -D
复制代码
注意:
因为NPM访问的是国外镜像资源，若是出现安装失败的状况，建议更换成国内的镜像资源cnpm下载安装。
复制代码
2.4 webpack的配置文件
webpack 开箱即用，能够无需使用任何配置文件。 然而，webpack 会假定项目的入口起点为 src/index ，而后会在 dist/main.js 输出结果，而且在生产环境开启压缩和优化。 一般，你的项目还须要继续扩展此能力，为此你能够在项目根目录下建立一个 webpack.config.js 文件，webpack 会自动使用它。
在项目根目录下新建 webpack.config.js 文件，这是webpack默认配置文件，详情请看 官网配置
const path = require('path'); //引入咱们的node模块的path
module.export = {
//默认是production，打包的文件默认被压缩。开发时能够设置为development，不被压缩
mode:'production',
//打包项目的入口文件
entry:'./src/app.js',
//打包项目的输出文件
output:{
//自定义打包输出文件名
filename:'js/[name].js', //文件名默认[name].js, 能够在前面加上相对路径,生成包裹js文件的文件夹
//输出文件的绝对路径
path:path.resolve(__dirname,'dist'), //定位,输出文件的目标路径
//输出文件的公共路径
publicPath:'http://cdn.com/',//公共路径,能够理解为绝对地址(域名)
},
...
...
}
复制代码
2.5 项目文件引入并开始打包
在webpac-simple-project项目中,咱们的文件结构树以下:
开始对js文件的引入: 在index.html中，引入打包好的文件路径 dist/index.js
<!DOCTYPE html>
<html>
<head>
<title>webpack simple project</title>
</head>
<body>
<!-- 该路径为项目打包好的文件路径,可使用html-webpack-plugin写入这个script的引入-->
<script src="dist/index.js"></script>
</body>
</html>
复制代码
开始对项目开始打包构建，打开terminal 定位到项目的根目录路径下，执行npm命令
1. cd webpack simple project目录下
2. npm run build
复制代码
输出内容以下:
3、webpack的核心概念 - Loader篇
3.1 什么是loader
webpack可使用loader 来预处理那些非 JavaScript 文件，就是经过使用不一样的Loader，webpack能够把不一样的静态文件都编译成js文件，好比css,sass,less,ES6/7,vue,JSX等
复制代码
loader概念图解: 官网loader
loader 支持串联的方式多个loader使用,在node的环境下也能够运行,支持同步和异步. 多loader使用时,要注意前后顺序,从右往左开始编译执行的.
3.2 使用Loader打包处理JS文件
- babel-loader的使用
做用: babel-loader的做用正是实现对使用了ES2015+语法的.js文件进行处理.
- 命令:
npm/cnpm install babel-loader --save-dev
复制代码
- babel-core的安装:它的做用在于提供一系列api。这即是说，当webpack使用babel-loader处理文件时，babel-loader实际上调用了babel-core的api
npm/cnpm install babel-core --save-dev
复制代码
- babel-preset-env的安装:它的做用在于告诉babel使用哪一种转码规则进行文件处理
npm/cnpm install babel-preset-env --save-dev
复制代码
babel的配置方式
- 第一种方式是经过package.json。在package.json文件中增长一个“babel"属性，该属性是一个JSON对象，做用是设置项目中的babel转码规则和使用到的babel插件:
{
...
"babel":{
"presets": [],
"plugins": []
}
...
}
复制代码
- 经过.babelrc文件, 在根目录下新建.babelrc文件, 里面默认输入“babel”的属性的值便可:
xxx.babelrc:
{
"presets": ["env"],
"plugins": []
}
复制代码
在 webpack.config.js 里 添加loader配置
const path = require('path');//物理路径
//__dirname,当前运行环境下的变量,也就是当前环境下的绝对路径,后面会跟着一个相对路径
{
...
module:{
rules:[
{
test:/\.js$/,
include:path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname,"node_modules"), // /node_modules/, //指定排除处理的范围文件,提升打包的速度,能够是正则表达式,还有绝对路径
loader: "babel-loader"
}
]
}
...
}
复制代码
项目文件的引入并打包
在src目录下，存在app.js 和 a.js 文件, 代码引入以下:
a.js文件代码:
function arrowToast (){
alert([1,2,3].map(n => n + 1)); //等同于alert([1,2,3].map(function(n){return n+1}))
}
module.exports = {
arrowToast:arrowToast
}
复制代码
app.js文件代码:
var a = require('./a.js')
function helloWorld (str){
alert(str)
}
helloWorld("helloWorld");
a.arrowToast();
复制代码
开始对项目开始打包构建，打开terminal 定位到项目的根目录路径下，执行npm命令
terminal 定位到根目录下 运行 npm run build
复制代码
打开咱们的dist文件下的index.html, 在浏览器运行, 能够看到咱们的页面效果会执行两个弹窗事件
第一次是“helloWorld”, 第二次是a.js中的es6方法函数结果 ""2,3,4""
复制代码
常见错误:
若是出现下面的打包错误:
Error: Cannot find module '@babel/core'
那是由于babel-loader的版本太高, 找不到babel-core. 二者之间不匹配, 这个时候的办法, 是先从新安装babel-loader,回退版本到7.0多
“cnpm install babel-loader@7.1.5 --save-dev”
复制代码
这样对于babel-loader的配置,也基本成功完成了.
3.3 使用Loader打包处理静态文件
3.3.1 支持加载样式CSS文件
- style-loader的使用
做用: 可以在须要载入的html中建立一个标签,style-loader加载到的css样式动态的添加该标签中.
命令:
npm/cnpm install style-loader --save-dev
复制代码
- css-loader的使用
做用: 容许在js中import一个css文件，会将css文件当成一个模块引入到js文件中. 只会加载引入到js文件中的css文件.
命令:
npm/cnpm install css-loader --save-dev
复制代码
项目文件的引入并打包
在src目录下，会有一个style文件和app.js,style下包含一个app.css文件 ,代码以下：
app.js文件代码:
import "./style/app.css"; //对css文件进行引入
复制代码
在 webpack.config.js 里 添加loader配置
module.exports = {
module: {
rules: [
{
test: /\.css$/, //匹配以css为后缀的文件
use: ['style-loader', 'css-loader'],//loader的执行顺序是从右向左，从下到上。css-loader：分析几个css文件之间的关系，最终合并为一个css。style-loader:在获得css生成的内容时，把其挂载到html的head里，成为内联样式。
},
],
},
};
复制代码
3.3.2 支持加载样式SASS文件
- sass-loader的使用
做用: 对项目中的scss文件进行处理
命令:
npm/cnpm install scss-loader --save-dev (node-sass可不安装)
复制代码
在 webpack.config.js 里 添加loader配置
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // 将 JS 字符串生成为 style 节点
"css-loader", // 将 CSS 转化成 CommonJS 模块
"sass-loader" // 将 Sass 编译成 CSS，默认使用 Node Sass
]
}]
}
};
复制代码
3.3.3 支持加载样式less文件
- less-loader的使用
做用: 对项目中的less文件进行处理
命令:
cnpm install less --save-dev
npm/cnpm install less-loader --save-dev
复制代码
在 webpack.config.js 里 添加loader配置
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // 将 JS 字符串生成为 style 节点
"css-loader", // 将 CSS 转化成 CommonJS 模块
"sass-loader", // 将 Sass 编译成 CSS，默认使用 Node Sass
"less-loader"
]
}]
}
};
复制代码
3.3.4 为 css 样式属性加不一样浏览器的前缀件
为了浏览器的兼容性，在不一样的浏览器中，使用个别样式时必须加入-webkit,-ms,-o,-moz这些前缀
浏览器内核:
1. Trident内核：主要表明为IE浏览器, 前缀为-ms
2. Gecko内核：主要表明为Firefox, 前缀为-moz
3. Presto内核：主要表明为Opera, 前缀为-o
4. Webkit内核：产要表明为Chrome和Safari, 前缀为-webkit
复制代码
- postcss-loader的使用
做用: 其主要是对css文件的预处理,autoprefixer是它的一个插件,主要是对css文件添加兼容性前缀
命令:
npm/cnpm install postcss-loader --save-dev
cnpm install autoprefixer --save-dev. //属于postcss的插件
复制代码
项目中对autoprefixer的配置
- 第一种方式是经过 postcss.config.js。在项目根目录下建立 postcss.config.js文件，代码以下:
module.exports = {
plugins: [
require('autoprefixer')
]
}
复制代码
在 webpack.config.js 里 添加loader配置
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // 将 JS 字符串生成为 style 节点
"css-loader", // 将 CSS 转化成 CommonJS 模块
"sass-loader", // 将 Sass 编译成 CSS，默认使用 Node Sass
"less-loader"
"postcss-loader"
]
}]
}
};
复制代码
- 第二种方式是直接在webpack.config.js文件配置对loader的特别支持
在 webpack.config.js 里 添加loader配置
module.exports = {
...
module: {
test:/\.(sc|le|c)ss$/, // 项目中若是有多个ss文件结尾时,正则表达式能够这么使用,最新执行的再前面
use:[{
loader:'style-loader'
},{
loader:'css-loader',
options:{
importLoaders:1， ////若是sass文件里还引入了另一个sass文件，另外一个文件还会从postcss-loader向上解析。若是不加，就直接从css-loader开始解析。
modules: true //开启css的模块打包。css样式不会和其余模块发生耦合和冲突
}
},{
loader:"less-loader"
},{
loader:"sass-loader"
},{
loader:'postcss-loader', //autoprefixer使用该插件为各浏览器支持的属性加上前缀
options:{
plugins:[require("autoprefixer")("last 5 versions")]
}
},
],
include:path.resolve(__dirname, 'src'),
},
};
复制代码
3.3.5 支持加载图片文件
- file-loader的使用
做用: 对项目中引入的资源文件(图片)进行处理，解决CSS等文件中的引入图片路径问题。 详细请看官方文档：官网: file-loader
命令:
npm/cnpm install file-loader --save-dev
复制代码
在 webpack.config.js 里 添加loader配置
module.exports = {
//配置模块,主要用来配置不一样文件的加载器
module: {
//配置模块规则
rules: [
{
test: /\.(png|svg|jpg|jpeg|gif)$/, //正则匹配要使用相应loader的文件
use: [
{
loader: 'file-loader', //要用到的loader
options: {
//palceholder占位符
name:'[name].[ext]', //打包后的图片名字，后缀和打包的以前的图片同样
outputPath: 'images/' //图片打包后的地址
},
},
],
},
],
},
};
复制代码
- url-loader的使用
做用: 将小图片转换成base64格式。 已经具有了file-loader的功能,使用时,能够不引用file-loader. 可是url-loader能够将图片转成base64字符,能更快的加载图片,一旦图片过大,就会使用file-loader的加载本地图片。详细请看官方文档：官网: url-loader
命令:
npm/cnpm install url-loader --save-dev
复制代码
在 webpack.config.js 里 添加loader配置
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|bmp/)$/i,
use: [
{
loader: 'url-loader',
options: {
name:'[name].[ext]',
outputPath: 'images/',
limit: 8192 //小于8192b,就能够转化成base64格式。大于就会打包成文件格式
}
}
]
}
]
}
}
复制代码
file-loader和url-loader使用注意:
1. 在css文件中对图片资源文件的引入可使用相对路径:
app.css文件中:
.imgClass{
width:400px;
height: 400px;
background: url('../assets/test.jpg');
}
.imgSize{
width:400px;
height: 400px;
}
2. 在html中若是使用img标签的src 对图片进行使用,须要“使用绝对路径”. 若是要使用相对路径,则须要以下:
<div class="imgClass"></div>
<img class="imgSize" src="${require('./src/assets/bg.jpg')}"/>
复制代码
- image-webpack-loader
做用:对引入项目中的图片文件进行压缩处理
命令:
npm/cnpm install image-webpack-loader --save-dev
复制代码
在 webpack.config.js 里 添加loader配置
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif|bmp/)$/i,
use: [
{
loader: 'url-loader',
options: {
name:'[name].[ext]',
outputPath: 'images/',
limit: 8192 //小于8192b,就能够转化成base64格式。大于就会打包成文件格式
}
},
{
loader:'image-webpack-loader', //对图片资源进行压缩处理
}
]
}
]
}
}
复制代码
3.4 使用Loader打包处理HTML文件
- html-loader
做用: 对项目中引入的模版html文件进行处理(必须在js文件中引入)
命令:
npm/cnpm install html-loader --save-dev
复制代码
项目文件的引入并打包
在webpac-simple-project项目中,咱们的文件结构树以下:
在src目录下，存在components文件夹 和 app.js 文件, 代码引入以下:
components文件夹下的layer.js文件代码:
//ES6语法
import template from './layer.html'
import "./layer.css";
// import "./layer.less";
function layer (){
return{
name:"layer",
tpl:template
}
}
//导出
export default layer;
复制代码
components文件夹下的layer.html文件代码:
<div class="layer">
<div>this is a layer</div>
</div>
复制代码
app.js对layer模板的引入:
// ES6语法
import Layer from './components/layer/layer.js'
const App = function (){
var dom = document.getElementById('app');
dom.innerHTML = new Layer().tpl;
console.log(dom);
console.log(Layer);
}
new App();
复制代码
根目录下运行:
npm run build 打包以后, 咱们能够在dist/index.html 浏览器运行以后,能够成功看到layer模版已经写入id为app的标签下
复制代码
3.5 完整的webpack.config.js 对loader的支持
const path = require('path');//
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:"./src/app.js",
output:{
filename:"js/[name].js",
path:path.resolve(__dirname,'dist') //__dirname,当前运行环境下的变量,也就是当前环境下的绝对路径,后面会跟着一个相对路径
},
plugins:[
new htmlWebpackPlugin({
template:'index.html',
filename:'index.html',
inject:true
})],
module:{ //loader使用方法
rules:[
{
test:/\.js$/,
include:path.resolve(__dirname, 'src'),
exclude: path.resolve(__dirname,"node_modules"), // /node_modules/,
//指定排除处理的范围文件,提升打包的速度,能够是正则表达式,还有绝对路径
loader: "babel-loader"
},{
test:/\.html$/, //使用html-loader对html模版内容进行引入.
// include:path.resolve(__dirname, 'src'),
loader: "html-loader"
},{
test:/\.(png|svg|jpg|jpeg|gif)$/i, //使用file-loader对资源文件的引入,i不区分大小写
include:path.resolve(__dirname, 'src'),
use: [
// {
// loader:'file-loader',
// options:{
// name:'assets/[name]-[hash:5].[ext]', //设置资源图片打包后的地址
// }
// },
{
loader:'url-loader',
options:{
limit:20000, //限制图片的最大字节
name:'assets/[name]-[hash:5].[ext]', //设置资源图片打包后的地址
}
},
{
loader:'image-webpack-loader', //对图片资源进行压缩处理
}
]
},{
test:/\.(sc|le|c)ss$/, // 项目中若是有多个ss文件结尾时,正则表达式能够这么使用,最新执行的再前面
// loader:'style-loader!css-loader!less-loader' 没有postcss-loader能够直接这样使用
use:[{
loader:'style-loader'
},{
loader:'css-loader',
options:{
importLoaders:1
}
},{
loader:"less-loader"
},{
loader:"sass-loader"
},{
loader:'postcss-loader', //autoprefixer使用该插件为各浏览器支持的属性加上前缀
options:{plugins:[require("autoprefixer")("last 5 versions")]}
},
],
include:path.resolve(__dirname, 'src'),
},
]
}
}
复制代码
项目结构图
Github地址:webpack-loader
4、webpack的核心概念 - Plugin篇
4.1 什么是plugin
plugin是webpack的支柱, 主要是为了解决loader没法实现的其余事情.想要使用一个插件，你只须要 require() 它，而后把它添加到 plugins 数组中。
多数插件能够经过选项(option)自定义,你也能够在一个配置文件中由于不一样目的而屡次使用同一个插件，这时须要经过使用 new 操做符来建立它的一个实例
复制代码
常见plugin概念图解: 官网plugin
4.2 经常使用的plugin插件
- html-webpack-plugin
做用: 打包项目中的html文件, 并生成对应打包的html文件.
命令:
npm/cnpm install html-webpack-plugin --save-dev
复制代码
介绍:
1.file: 指定生成的文件
2.filename: 指定生成的文件名称, 优先级比file高, 二者取一便可
3.template: 须要被打包的html文件路径
4.inject: 主要是指定引入的js文件写入到html文件的位置.
主要有true(默认值,body底部)、body(body底部)、head(html标签的head)、false(不写入生成的js文件,基本不会用)
5.minify对象:主要是对html文件进行压缩,可去npm官网(https://www.npmjs.com/package/html-webpack-plugin)查看对应的属性配置
6.chunks:指定哪些须要被引入打包的模块
7.excludeChunks:指定哪些不须要被引入打包的模块,而其余的chunks将会被引入. 且与优先级高于chunks,
也就是说当二者同时存在时,excludeChunks若是包含chunks中的chunk,则该chunk也不会被引入
复制代码
在 webpack.config.js 里 添加plugin配置
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html文件
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), //定位,输出文件的目标路径
filename: 'js/[name].js',//文件名默认[name].js,
},
// webpack 中对于plugin的学习
plugins: [ //数组, 支持生成多页面的html文件
new HtmlWebpackPlugin({ //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。能够直接上线
file: 'app.html', //指定要生成的文件
filename: 'app.html', //指定要生成的文件名称,优先级比file高, 二者指定一个就能够,加上hash会每次生成不一样的html文件
template: 'index.html', //须要被打包的模版html
inject: 'body', //指定脚本插入的标签位置, 能够是head,body等标签
title: 'webpack is good',
minify: { //对html文件进行压缩
removeComments: true, //删除打包的文件内部代码注释
collapseWhitespace: true, //删除空格
},
}),
],
...
}
复制代码
- clean-webpack-plugin
做用: 自动清除上一次打包的dist文件
命令:
npm/cnpm install clean-webpack-plugin --save-dev
复制代码
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'js/[name].js',//文件名默认[name].js,
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html' //在打包以后，以.html为模板，把打包生成的js自动引入到这个html文件中
}),
new CleanWebpackPlugin(['dist']), // 在打包以前，能够删除dist文件夹下的全部内容
]
};
复制代码
- source-map
做用: 打包编译后的文件和源文件的映射关系，用于开发者调试用。
命令:
npm/cnpm install clean-webpack-plugin --save-dev
复制代码
source-map 把映射文件生成到单独的文件，最完整但最慢
cheap-module-source-map 在一个单独的文件中产生一个不带列映射的Map
eval-source-map 使用eval打包源文件模块,在同一个文件中生成完整sourcemap
cheap-module-eval-source-map sourcemap和打包后的JS同行显示，没有映射列
development环境推荐使用： devtool: 'cheap-module-eval-source-map',
production环境推荐使用： devtool: 'cheap-module-source-map',
复制代码
- webpack-dev-server
做用: 解决每次在src里编写完代码都须要手动从新运行 npm run dev
命令:
npm install webpack-dev-server --save-dev
复制代码
介绍:
1. contentBase :配置开发服务运行时的文件根目录
2. open :自动打开浏览器
3. host：开发服务器监听的主机地址
4. compress :开发服务器是否启动gzip等压缩
5. port：开发服务器监听的端口
复制代码
解决每次在src里编写完代码都须要手动从新运行 npm run dev，在 package.json 里添加配置
{
"name": "haiyang",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"bundle": "webpack",
"watch": "webpack --watch",// 加--watch自动监听代码的变化
},
}
复制代码
在 webpack.config.js 里 添加plugin配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
mode: 'development',
devtool: 'cheap-module-eval-source-map',
entry: {
main: './src/index.js'
},
+ devServer: {
contentBase: './dist',
open: true,
port: 8080,
proxy: {//配置跨域，访问的域名会被代理到本地的3000端口
'/api': 'http://localhost:3000'
}
},
module: {
rules: []
},
plugins: [],
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist')
}
}
复制代码
在 package.json 中 添加热更新
{
"name": "haiyang",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"bundle": "webpack",
"watch": "webpack --watch",// 加--watch自动监听代码的变化
"start": "webpack-dev-server",//配置热更新
},
}
复制代码
4.3 plugin对多页面项目的配置支持
在 webpack.config.js 里 添加plugin配置
const HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html文件
module.exports = {
//context:'' //整个环境的上下文, 也就是项目根目录
entry: { //入口文件, 在vue-cli中是main.js
main: './src/index.js',
app: './src/app.js',
home: './src/home.js',
mine: './src/mine.js',
},
output: { //webpack如何向外输出
path: path.resolve(__dirname, 'dist'), //定位,输出文件的目标路径
filename: 'js/[name].js',//文件名默认[name].js, 能够在前面加上相对路径,生成包裹js文件的文件夹
//也可用hash chunkhash结合配置. [name]-[hash].js [name]-[chunkhash].js.
//使用chunkhash,在打包的时候,若是文件无修改,则不会在打包. 等同于版本号,使用用于多页面
publicPath: 'http://cdn.com/' //公共路径, 能够理解为绝对地址(域名), 设置publicpath,在打包输出的时候,
//在html中引入的路径会以publicPath+path+filename.js这两个路径拼接后的文件名称引入
},
// webpack 中对于plugin的学习
plugins: [ //数组, 支持生成多页面的html文件
new HtmlWebpackPlugin({ //将模板的头部和尾部添加css和js模板,dist 目录发布到服务器上，项目包。能够直接上线
file: 'app.html', //指定要生成的文件
filename: 'app.html', //指定要生成的文件名称,优先级比file高, 二者指定一个就能够,加上hash会每次生成不一样的html文件
template: 'index.html', //须要被打包的模版html
inject: 'body', //指定脚本插入的标签位置, 能够是head,body等标签
title: 'webpack is good',
minify: { //对html文件进行压缩
removeComments: true, //删除打包的文件内部代码注释
collapseWhitespace: true, //删除空格
},
chunks: ['main', 'app']
}),
new HtmlWebpackPlugin({ //home页面
filename: 'home.html',
template: 'home.html',
inject: true,
chunks: ['main', 'home'] //chunks属性,指定每个模版要引入的chunk(js文件),并且是做为数组存在,其内部对象为要引入的chunk名称.
}),
new HtmlWebpackPlugin({ //mine页面
filename: 'mine.html',
template: 'mine.html',
inject: true,
//chunks:['main','home'], excludeChunks和chunks最好二者取其一,互不包含
excludeChunks: ['home', 'app'], //指定哪些不被引入的chunk(js文件),而剩下的其余chunk,将在该模版进行引入, 它和chunks属性对立,
//且与优先级高于chunks,也就是说当二者同时存在时,excludeChunks若是包含chunks中的chunk,则该chunk也不会被引入
})
],
...
}
复制代码
Github地址:webpack-simple-project
相关文章
- 1. webpack4.0基础篇
- 2. webpack4.0搭建vue脚手架详解
- 3. 10天完全搞定-webpack4.0
- 4. webpack4.0
- 5. webpack4.0 CheatSheet
- 6. Git使用详细篇（全解）
- 7. 一篇Mysql注入最全详解（2）
- 8. Webpack4.0各个击破（5）module篇
- 9. Webpack4.0各个击破（10）integration篇
- 10. webpack4.0各个击破（7）—— plugin篇
- 更多相关文章...
- • 免费ARP详解 - TCP/IP教程
- • *.hbm.xml映射文件详解 - Hibernate教程
- • Flink 数据传输及反压详解
- • 三篇文章了解 TiDB 技术内幕——说存储
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. Appium入门
- 2. Spring WebFlux 源码分析(2)-Netty 服务器启动服务流程 --TBD
- 3. wxpython入门第六步（高级组件）
- 4. CentOS7.5安装SVN和可视化管理工具iF.SVNAdmin
- 5. jedis 3.0.1中JedisPoolConfig对象缺少setMaxIdle、setMaxWaitMillis等方法，问题记录
- 6. 一步一图一代码，一定要让你真正彻底明白红黑树
- 7. 2018-04-12—（重点）源码角度分析Handler运行原理
- 8. Spring AOP源码详细解析
- 9. Spring Cloud（1）
- 10. python简单爬去油价信息发送到公众号
欢迎关注本站公众号,获取更多信息
