一.webpack的文档和概念
1.文档地址:https://webpack.docschina.org/concepts/
2.概念:webpack是JavaScript应用程序的静态模块打包器(static module bundler).在webpack处理应用程序时,它会在内部创建一个依赖图(dependency graph),用于映射到项目需要的每个模块,然后将所有这些依赖生成到一个或多个bundle.
二.安装webpack
1.webpack是基于node环境的,想要使用webpack必须先安装nodeJs(官网地址:https://nodejs.org/en/).
2.打开cmd命令(之后的命令都是在cmd里输入),输入node -v,出来版本号就是安装完成了.
3.npm是node的一个包管理器,输入npm -v如果出来了一个版本号就是已经内置了.
4.npm的服务器在国外,下载包比较慢,也可以使用cnpm(淘宝npm镜像)下载包,cnpm的同步频率为10分钟/次,下载cnpm只需要输入npm
install -g cnpm --registry=https://registry.npm.taobao.org然后按回车等待安装完成即可.
5.cnpm不能完全代替npm,建议下载模块的时候用cnpm,其他时候用npm.
6.输入npm install -g webpack,install可以简写为i,-g的意思是全局,不安装在全局也可以.
7.建议用高版本的,避免之后使用的时候出错.
三.使用webpack
1.我在F盘下新建了一个名为wbpk的文件夹用于测试,然后进入到这个文件夹进行初始化:npm init,一路回车,最后输入yes再回车.
2.文件夹的名字默认会成为项目的名字,项目名字不可以跟模块名冲突.
3.重点,接着输入cnpm i -S webpack按回车,为什么要再安装一次?上次安装是在全局安装,这次不是,项目上线以后环境里面可能不具备
webpack的依赖,所以要把webpack的包添加到项目依赖里.--save表示这个包是项目上线的时候要用到的,简写:-S,--save-dev表示这个包只会存
在于本地开发环境里面,简写:-D.安装完成后会发现文件夹里出现一个名为node_modules的文件夹,所有依赖的模块都在这里面,项目上线的时候不
需要上传.
4.再创建一个文件夹名为src,放编译前的源文件.
5.src下再创建一个app.js,里面随便输入一个console.log(666);然后保存.
6.重点,创建名为webpack.config.js的文件,这是webpack的配置文件,内容如下:
const path = require('path');
module.exports = {
entry: './src/app.js',//入口,要编译的文件的位置
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
}//出口,编译好的文件放在哪个目录下,叫什么名字
};
7.配置好以后保存,在wbpk文件夹的根目录下,输入webpack回车编译指定文件,出来一个警告说你没有配置环境,根目录下多出来一个名
为dist的文件夹,里面放了编译好的文件.
8.打开app.bundle.js发现它是被压缩过的,去掉了多余的字符,这是生产环境,是项目上线需要的.
9.重点,如何使用开发环境?
1.编译的时候把webpack改成webpack -d,d可以理解为development的缩写,不加-d的话默认是-p,也就是生产环境.
2.打开webpack的配置文件,在entry的上一行,module.exports的下一行添加mode: 'development',左边这个逗号别忘了一起
复制,development开发环境,production生产环境.
10.运行编译后的文件,在wbpk文件夹的根目录下,输入node dist/app.bundle.js,打印出来一个666.
11.重点,如果修改app.js里面的内容需要重新编译,否则还是没修改的样子,不过这样很麻烦,解决办法:编译的时候再加上-watch,回车
之后发现看不见路径了,此时已经开始监听了,你去修改app.js里面的内容它会自动重新编译,不需要监听了按ctrl+c退出监听状态.
12.到这里webpack最基本的使用已经搞定了.
四.html-webpack-plugin
1.下载html-webpack-plugin:输入cnpm i -D html-webpack-plugin回车.
2.重点,要使用这个插件必须先在webpack.config.js里面配置:首先在module.exports的上一行写const HtmlWebpackPlugin =
require('html-webpack-plugin');这行代码的意思是声明一个常量接收引入的插件(常量名可以跟我不一样),然后在output:{...}的右花括号
后面加上一个逗号并回车输入以下代码:
plugins: [
new HtmlWebpackPlugin({//花括号及花括号里面的东西可以不写,const后面的常量名要跟new后面的一样
title: '我是标题',//设置页面标题
filename: '我是网页.html',//设置文件名称
//minify: {
//collapseWhitespace: false//是否压缩,默认true(是),已注释,学习阶段不压缩
//}
template: './src/muban.html'//按照哪个路径下的哪个模板生成页面
})
]
注意:使用模板的话会导致title属性失效,因为模板中的title标签会覆盖配置文件里设置的,需要在模板中的title标签中写入<%=
htmlWebpackPlugin.options.title %>
五.loader
1.想要处理css文件,先输入cnpm i -D css-loader style-loader回车.
2.在app.js的第一行写import css from './app.css';(导入css文件),然后在同个目录下创建一个app.css文件,里面写想要的css.
3.重点,在webpack.config.js里面配置:在plugins:[...]的结尾加上逗号然后输入以下代码:
module: {
rules: [
{test: /\.css$/, use: ['style-loader','css-loader']}
//css-loader用于处理css文件,style-loader用于处理样式
//use数组里的loader使用顺序是从右到左,要先处理css文件再处理css文件里的样式
]
}
输入webpack编译,打开编译后的html文件,发现样式已经设置上去了,但是dist文件夹下面并没有编译后的css文件,因为编译后的js文件
会帮我们处理样式.但是如果我们需要把css单独分离出来怎么办?此时我们需要一个分离插件.
4.输入cnpm i -D sass-loader node-sass extract-text-webpack-plugin@next回车.
5.创建一个app.scss文件,内容为:
html{
body{
background-color: #f60;
}
}
6.重点,在webpack.config.js里面配置:首先在module.exports的上一行写const ExtractTextWebpackPlugin = require
('extract-text-webpack-plugin');然后把刚才配置的
rules: [
{test: /\.css$/, use: ['style-loader','css-loader']}
]
改成:
rules: [
{
test: /\.scss$/,
use: ExtractTextWebpackPlugin.extract({
fallback: "style-loader",
use: ['css-loader','sass-loader']
})
}
]
plugins:[...]里面加上new ExtractTextWebpackPlugin("styles.css")//括号里面写的是独立出来的css文件名,别忘了把app.js里
的import css from './app.css';改成import css from './app.scss';.
7.以上操作完成后编译,dist文件夹下出现了我们想要的css文件,github上的帮助文档地址:https://github.com/webpack-
contrib/extract-text-webpack-plugin
六.ES6转ES5
1.注意:ES6转ES5可能会出现不兼容的情况,因为它只是负责转换,有些方法或属性低版本IE本来就不兼容还需要自己手写兼容.
2.在src目录下创建es6.js,输入一些es6的代码:
export default function(){
let arr = [1,2,3,4];
arr.forEach(item => console.log(item));
}
然后在app.js里加入以下代码:import fn from './es6.js';fn();
3.重点,下载babel-preset-es2015依赖之前必须先用编辑器创建.babelrc文件(注意b前面还有个点),
文件内容为{"presets":["es2015"],"plugins":[]},否则安装的时候会报错,然后在webpack.config.js里面的module下面的
rules里面加入一个对象:{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}(test的值是一个正则表达式,
用于匹配js文件,use是使用的意思,exclude排除某个文件夹).输入cnpm i -D babel-core babel-loader babel-preset-es2015回车.
最后输入webpack编译,发现代码已经转换成功.
七.webpack-dev-server
1.输入npm i -D webpack-dev-server回车.这个插件不需要刻意去配置,如果需要更多功能才要配置.
2.重点,安装完成后可以使用这个插件的名称来编译文件,它的作用相当于webpack -d --watch.输入webpack-dev-server编译文件,它
会启动一个端口号为8080的服务,要访问页面可以在地址栏输入localhost:8080回车.如果需要修改端口号就进入配置文件,在modules头上加一个
devServer:{port:端口号},同时别忘了逗号.
3.如果我们想在编译的时候让它自动帮我们打开浏览器并访问页面,可以在devServer对象下面再加一条open:true.
4.重点,不想输入那么多个字母怎么办?进入packgae.json的"scripts"配置:"属性名":"命令",然后用npm run 属性名即可.示
例:"dev":"webpack-dev-server",npm run dev回车,效果跟刚才一样.
八.clean-webpack-plugin
1.在某种情况下,多次编译dist文件夹下会有很多文件,但我们只需要最新的那一个,其余的都要删除,这个插件可以帮助我们.输入cnpm
i -D clean-webpack-plugin回车.
2.重点,在webpack.config.js的头部配置const CleanWebpackPlugin = require('clean-webpack-plugin');然后在plugins:[...]
里面new CleanWebpackPlugin(['dist'])//小括号里面写的是编译后要清楚哪个文件夹下的编译后的文件.
九.图片资源处理
1.输入cnpm i -D file-loader回车.
2.重点,在webpack.config.js里面的rules:[...]里面配置{test:/\.(jpg|png|jpeg)$/,use:[{loader:'file-loader',options:
{name:'[name].[ext]',outputPath:'images/'}}]},不过这个只能处理背景图片.为了解决这个问题,我们需要再下载一个插件.输入cnpm i -D
html-loader,并在webpack.config.js里面的rules:[...]里面配置{test:/\.html$/,use:['html-loader']},这样就可以处理img标签里的图片
路径了.
十.热更新/热模块替换
1.重点,之前已经讲过webpack-dev-server,它会在某个地方变动了以后所有资源都重新加载,这样是没有必要的,哪个模块变动更新哪个
模块就行了,此时就要用到热更新.修改devServer:增加一条hot:true//开启热更新,然后在头部写const webpack = require('webpack');最后
在plugins:[...]里面new webpack.hotModuleReplacementPlugin()保存,编译.
2.编译后打开网页看控制台,里面输出了一堆信息,其中输出了被改变模块的id值,我们很难从id值里面看出具体哪个模块发生了变动,解
决方法:在plugins:[...]里面new webpack.NamedModulesPlugin()保存,编译.这样输出的值就不是id值,而是变动的文件的路径.
