webpack4 的使用
文件夹名称不要用中文, 不要有 webpack 关键字.
全局安装
$ npm install webpack webpack-cli -g
初始化?
$ npm init
局部安装(为了应付不同版本?)
$ npm install webpack webpack-cli --save-dev
packjson
给npm 看的.
$ npm install
可以把 packjson里的依赖包全都下载.
默认入口 是 ./src/index.js
创建好之后
$ webpack
生成默认出口 ./dist/main.js
设置成 开发环境
$ webpack --mode=development
配置基本的webpack.config.js
给webpack 看的.
// node 自带路径模块.
var path = require("path");
// 模块化导出格式
module.exports = {
// 配置入口文件
entry: "./src/index.js",
// 配置出口文件
output: {
// 出口文件名
filename: "main1.js",
path: path.resolve(__dirname, "dist") //__dirname 指的是根目录.dist 设置出口文件夹.
},
// 配置 环境, 设置为开发环境
// 导出的文件不是压缩的
mode: "development"
// 设置为生产环境,导出的文件是压缩的.
//mode : "production"
}
开启监听
$ webpack --watch
下载服务器插件
$ npm install webpack-dev-server -D
-D 表示 --save-dev
配置相关的webpack.config.js
// 开启服务器时,默认打开dist文件下的index.html
// 自动刷新页面
devServer : {
contentBase : "dist",
// 更改 端口
port : 9879
}
运行 webpack-dev-server
$ webpack-dev-server
也可以用hot 只更新变化的部分.
$ webpack-dev-server --hot
webpack.config.js
css,html,img 等文件的解析
// node 自带路径模块.
var path = require("path");
// 模块化导出格式
module.exports = {
// 配置入口文件
entry: "./src/index.js",
// 配置出口文件
output: {
// 出口文件名
filename: "main1.js",
path: path.resolve(__dirname, "dist") //__dirname 指的是根目录.dist 设置出口文件夹.
},
// 配置 环境变量, 设置为开发环境
// 导出的文件不是压缩的
mode: "development",
// 设置为生产环境,导出的文件是压缩的.
//mode : "production"
// 开启服务器时,默认打开dist文件下的index.html
// 自动刷新页面
devServer : {
contentBase : "dist",
// 更改 端口
port : 9879
},
// 应用loader
module : {
rules : [
// css loader
{
// 正则匹配需要转换的文件类型
test : /\.css$/,
// 使用的加载器, 顺序是从右向左,css-loader 用来解析 css style-loader 用来注入style标签?
use :['style-loader','css-loader']
},
{
test : /\.html$/,
use : [
{// 单独抽离的文件,进行处理生成文件
loader : 'file-loader',
options : {
name : "index.html"
}
},
{// 单独抽离html文件
loader : 'extract-loader'
},
{//找到 html文件
loader : 'html-loader'
}
]
},
// es6 js loader
// {
// test : /\.js$/,
// use : ["babel-loader"]
// },
// 图片 loader 字体loader
{
test : /\.(jpg|png)$/,
use : [
{
loader : "url-loader",
options : {
//小于该大小时,生成url码,大于时,生成独立文件.
limit : 8912,
// 独立文件的文件夹,以及名称和格式.
name : "/img/[name].[ext]"
}
}
]
}
]
}
}
当多个入口文件时
entry: {
main : "./src/index.js"
},
output: {
// 出口文件名 名字会变成main
filename: "[name].js",
path: path.resolve(__dirname, "dist") //__dirname
},
不用loader 用 插件 解析 html文件
npm install html-webpack-plugin -D
webpack.config.js里添加
在开头添加
var HtmlWebpackPlugin = require('html-webpack-plugin');
...
plugins: [
new HtmlWebpackPlugin({
// 设置title
title : "title",
// 用哪个index文件为模板,生成的index.html会自动引入main.js
template : "./src/index.html"
})
]
需要注意的是, 这种方式加载html, 不必在 入口函数中进行引入.
这种情况下,hmtl里引入的资源都没有进入 入口函数的 依赖关系里.
所以都不会被解析打包.
测试另一个插件,用来压缩js的插件
$ npm install uglifyjs-webpack-plugin -D
webpack.config.js
文件头部
var uglify = require("uglifyjs-webpack-plugin");
...
plugins: [
new HtmlWebpackPlugin({
// 设置title
title : "title",
template : "./src/index.html"
}),
new uglify()
]
css文件也可以抽离成独立文件,插件
$ npm install mini-css-extract-plugin -D
webpack.config.js
文件头部
var MiniCss = require("mini-css-extract-plugin");
css 相关loader中, 把style-loader 替换掉
{
test: /\.css$/,
use: [MiniCss.loader, 'css-loader']
},
插件调用
plugins: [
new HtmlWebpackPlugin({
// 设置title
title : "title",
template : "./src/index.html"
}),
new uglify(),
new MiniCss({
// contenthash:8 根据内容生成八位数哈希值.
filename : "[name]_[contenthash:8].css"
})
]
我了个擦, webpack 最烦的地方是,报错之后,不知道问题出在哪里,
就这一个班小时的视频看了3,4个小时才看完,,
真的是,感觉如果不用于构建大项目, 这个东西还挺费时间的.
算了,还是再熟练熟练基本操作..
webpack.config.js
// node 自带路径模块.
var path = require("path");
// 插件必须 在这里引入
var HtmlWebpackPlugin = require("html-webpack-plugin");
var uglify = require("uglifyjs-webpack-plugin");
var MiniCss = require("mini-css-extract-plugin");
// 模块化导出格式
module.exports = {
// 配置入口文件
entry: {
main: "./src/index.js"
},
// 配置出口文件
output: {
// 出口文件名
filename: "[name].js",
path: path.resolve(__dirname, "dist") //__dirname 指的是根目录.dist 设置出口文件夹.
},
// 配置 环境变量, 设置为开发环境
// 导出的文件不是压缩的
mode: "development",
// 设置为生产环境,导出的文件是压缩的.
//mode : "production"
// 开启服务器时,默认打开dist文件下的index.html
// 自动刷新页面
devServer: {
contentBase: "dist",
// 更改 端口
port: 9879
},
// 应用loader
module: {
rules: [
// css loader
{
// 正则匹配需要转换的文件类型
test: /\.css$/,
// 使用的加载器, 顺序是从右向左,css-loader 用来解析 css style-loader 用来注入style标签?
use: [MiniCss.loader, 'css-loader']
},
// {
// test : /\.html$/,
// use : [
// {// 单独抽离的文件,进行处理生成文件
// loader : 'file-loader',
// options : {
// name : "index.html"
// }
// },
// {// 单独抽离html文件
// loader : 'extract-loader'
// },
// {//找到 html文件
// loader : 'html-loader'
// }
// ]
// },
// es6 js loader
// {
// test : /\.js$/,
// use : ["babel-loader"]
// },
// 图片 loader 字体loader
{
test: /\.(jpg|png)$/,
use: [{
loader: "url-loader",
options: {
//小于该大小时,生成url码,大于时,生成独立文件.
limit: 8912,
// 独立文件的文件夹,以及名称和格式.
name: "/img/[name].[ext]"
}
}]
}
]
},
plugins: [
new HtmlWebpackPlugin({
// 设置title
title : "title",
template : "./src/index.html"
}),
new uglify(),
new MiniCss({
// contenthash:8 根据内容生成八位数哈希值.
filename : "[name]_[contenthash:8].css"
})
]
}
重来一遍
重来一遍,
-
创建 文件夹
git bash here
局部安装 webpack webpack-cli
初始化 npm init
创建 webpack.config.js
配置入口,出口,环境变量
完,又出错.
image.png
把mode 写成了 mood
试一下 js依赖.
试一下 --watch
下载 webpack-dev-server
测试启动一下
配置 webpack-dev-server 让网页自动刷新
试一下 webpack-dev-server --hot
测试 打包 css
创建,css文件,
下载 css-loader, style-loader
main, 引入依赖
完,报错
应该是没有配置loader
配置loader
还是报同样的错
找到问题
引入css时写错
把 require("demo.css"); 改成 require("./demo.css");
不能没有./,路径不能简化.
测试把html 打包
下载 file-loader, html-loader, extract-loader
创建 html文件
配置 html文件
出错, 页面没有正常渲染
没有在main.js 中引入 html文件
引入文件
又报错
又犯了同样的错误
引入文件时,路径填写不准确.
把 require("index.html"); 改成 require("./index.html");
还是没有按照预期渲染, css似乎没起作用.
发现 之前引入的 math.js 也没有起作用.
哦,明白了,
我没有在 index.html当中引入 生成后的mani.js
尼玛..
测试 加载图片模块
粘贴两个图片到 ./ src/img文件夹里
下载 url-loader
配置 url-loader
让img 抽离成独立文件.
测试 加载 html web-pack-plugin
下载 web-pack-plugun
在 config.js中 引入
在plugins 中 new
需要把 html 相关loader 配置删除
报错
new HtmlWebpackPlugin(); 不能有冒号..低级错误
报错,
需要把 在 main.js中 引入的html 给删掉.
配置,生成的html 和我自己写的一样,
有个预期的错误,
即,在html中img标签引入的图片找不到,
因为没有进入main.js的打包过程,就不会产出相关的文件.
测试 下载 uglifyjs-loader 压缩js代码
下载 uglifyjs-loader
(这插件名字起的很逗啊, 不是丑的意思嘛?,压缩后确实难看了也对.)
报错 应该是名字输入错了
不是npm install uglifyjs-loader -D
而是 npm install uglifyjs-webpack-plugin -D
配置 uglify
先引入 后实例
发现一个问题,
我的js代码会执行两次,
原因是,我的src/index.html里引入了main.js
而 Htmlwebpackplugin 生成的 index.html 也会默认 引入main.js
引入两次,导致执行两次.
测试,把css 独立出来.
下载插件 npm install mini-css-extract-plugin -D
把依赖干掉?
头部引入
用minicss.loader 替换掉 style-loader
实例化 new Minicss()
设置 文件名.
报错,
引入插件时,名字写错了
不是 mini-css-webpack-plugin
而是mini-css-extract-plugin
出了问题,
没有生成独立的css文件,
原因是, 需要将 css文件 在main.js中引入.
这与html的插件不同,html的插件是,用插件就不要引入,
而css这个插件,需要引入,还需要更改 style-loader
在今天结束前开始来第三次.
我们稍微换一下思路.
我们把需要安装的loader 和 plugin
也就是这个 package.json 先保存下来.
用npm install 来试一下.
创建文件夹
git bash here
npm init
在package.json里
添加要安装的项目.
"devDependencies": {
"css-loader": "^1.0.1",
"extract-loader": "^3.0.0",
"file-loader": "^2.0.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.5",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.0.1",
"url-loader": "^1.1.2",
"webpack-dev-server": "^3.1.10"
},
npm install
不知道怎样才算是成功
创建 webpack.config.js
设置入口,出口,环境变量
创建入口文件,
咦? 我们发现package.json 里的依赖项当中, 是没有webpack webpack-cli 的
应该是不能通过 这种方式安装
安装 webpack webpack-cli -D
测试webpack
测试 js 文件依赖.
测试 webpack --watch
测试 webpack-dev-server
配置 webpack-dev-server
测试是否会自动刷新.
出错.
写成了
devServer : {
contBase : "dist",
port : 9876
}
应该改成
devServer : {
contentBase : "dist",
port : 9876
}
测试 webpack-dev-server --hot
测试依赖一个 css
配置 css-loader style-loader
测试依赖一个html
配置 html-loader extract-loader file-loader
测试 加入两个图片.
配置 url-loader
报错,似乎是语法错误
没放进对象的缘故.
测试,用htmlwebpackplugin 独立出 html文件.
报错,html 解析失败
路径问题
不应该是
template : "./index.html"
而是
template : "./src/index.html"
此处要填写的是 config.js 和 index.html 之间的相对路径.
html中 img标签没有进入 打包之中, 所以会引入失败.
但这要怎么解决呢?
还是说用 file-loader 这种方式更方便?
测试,js 压缩代码插件
报错,应该是插件名称写错了.
测试 mini-css-extract-plugin 独立css 文件
第三次基本操作完成.感觉确实好多了.
特别是,通过packjson.的方式批量下载 npm包 比一个一个下要节省相当多的时间.
但这种方式,应该注意要把不需要的都去掉.
现在感觉,只要能很好的看懂 package.json 和 webpack.config.js 的内容的话,
实际上配置的时候,只需要进行复制粘贴就可以了.
webpack 个人觉得最明显 过瘾的地方是,
似乎,我拥有了全世界的包.哈哈哈,
现在弄两个额外的任务.
1.把今天的package.json 里的内容, 以及 webpack.config.js的内容,
制成 代码提示.这样比复制粘贴稍微方便一点.
- 我们试一下 scss loader的配置.
1.失败,似乎 hbuilder 对 代码提示的长度是有所限制的.
方法是把一个文件分割成好多个, 我分了5个都不行, 这就没意思了.
2.成功, 参照
webpack4.x 处理less、sass文件,分离编译后的css，自动添加css前缀,自动消除冗余css 第七节;
稍作改动,在loader里添加
{
test : /\.s(c|a)ss$/,
use : [MiniCss.loader,"css-loader","sass-loader"]
},
在main.js中引入
require("./scss/demo1.scss");
花了将近一天的时间打了三次webpack , 希望是值得的.
报错
应该是入口写错了.
main : "./src/mian.js" 改成 main : "./src/main.js"
测试 js文件依赖
疑问,
在package.json里
如果
"devDependencies": {
"webpack": "^4.26.1",
"webpack-cli": "^3.1.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
}
写成
"devDependencies": {
"webpack",
"webpack-cli",
"babel-core",
"babel-loader"
}
然后 npm install 他会帮我正常安装嘛?
"devDependencies": {
"webpack": "^3",
如果写成这样呢?
}
测试html
报错
,应该是options写错了
运行报错,
原因是, html当中引入的应该是生成后的 js, 而不是 src 里的js,
测试两个图片
测试 图片独立成文件.
报错
没有生成文件.
我勒个去,
因为我不小心把 src 里的 img给删掉了.
测试, 用 html-webpack-plugin
独立 html 文件.
报错
哦明白了,main.js中不能引入html
测试 js 代码压缩.
css 分包
测试 mini-css
测试 scss
报错,
new MiniCssExtractPlugin({
filename : "./css/[name]_[contenthash:8].css"
})
放进 css文件夹里之后,
图片资源路径找不到了.
我们分析一下.
我在 scss 当中的 引入的图片路径是这样的.
url(../img/3test.jpg);
是基于src/scss文件的 图片的相对路径.
当然我设置的正好和 dist/scss当中的相对路径是一样的.
我们这样测试,
先把 miniCss 路径改回来.
new MiniCssExtractPlugin({
filename : "[name]_[contenthash:8].css"
})
然后把文件放入,src/scss/scss
引入相对路径,看看会怎么样.
成功, 表明, 确实要填写src里的路径关系.
刚才发现,忘了在 main.js 中引入 scss文件,
把文件引入后,我们再重新测试上面的问题.
不是因为没有引入依赖,一样是这个问题.
测试,我们把引入放在 css文件上.
还是同样的报错.
假设是这样的,
本来生成的文件的路径,都是相对 output 当中的path的,也就是 ./dist
minicss 让生成的 css 文件都 相对 ./dist/css?
百度一下
mini-css-extract-plugin;
看文档推测,
不要在 插件filename上 设置要存放的文件夹,
而是放在loader里.
rules: [{
test: /\.css$/,
use: [{
loader: MiniCss.loader,
publicPath: "./dist/css"
},
"css-loader"
],
},
报错,一般是配置选项错了.
还是不行,首先不会帮我创建 css 文件夹.
但有这个效果.
也就是说, 这个文件到底在哪里创建由 mini 来决定,
但里面的资源文件相对于谁,可以用 publicPath 来决定?
测试一下
{
test: /\.css$/,
use: [{
loader: MiniCss.loader,
options : {
publicPath: "./dist/"
}
},
"css-loader"
],
},
....
new MiniCss({
filename: "./css/[name]_[contenthash:8].css"
})
文件确实是在指定的文件夹下产生了,
但还是报错
很浪费时间, 一个小时有了,,
百度吧,,
算了先保留
