- 什么是webpack？
webPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。 - 安装webpack
npm install -g webpack全局安装webpack(安装错误检查node版本号,或者更换cnpm的镜像源) - 项目目录初始化:
npm init - 项目目录安装:
npm install --save-dev webpack - 如何升级:
删除node_modules文件夹，然后npm -install -g webpack直接升级 然后在package.json里改一下版本号 - 项目目录创建src和dist目录
- 命令行打包：
webpack src/entery.js dist/bundle.js打包js 前面的是需要打包的js 后面是要打包后合成的js名和路径，这种方式比较麻烦 - 在项目目录下创建
webpack.config.js，这里能够写webpack的配置文件，配置出口和入口，基础配置
const path=require('path');
module.exports={
entry:{//配置文件入口
entry:'./src/entry.js',
entry2:'./src/entry2.js'
},
output:{//配置文件出口
path:path.resolve(__dirname,'dist'),
filename:'[name].js'
},
module:{},//模块：例如解读CSS,图片如何转换，压缩
plugins:[],//插件，用于生产模版和各项功能
devServer:{}//配置webpack开发服务功能
}
- 安装webpack-dev-server热更新（本地安装）：
npm install webpack-dev-server --save-dev - 在webpack.config.js的devServer里添加：
devServer:{
contentBase:path.resolve(__dirname,'dist'),
host:'192.168.0.100',//本地IPv4地址
compress:true,//是否启用服务器压缩
port:8989
}
- 在package.json的scripts里写入全局变量方法：
"server":"webpack-dev-server --open"，然后直接npm run server - 注意，webpack3.5版本以下不支持热更新
- 使用loader：打包css需要使用到style-loader:安装loader：
npm install style-loader --save-dev，还需要css-loader:cnpm install css-loader --save-dev - 在压缩前的js里引入css：
import css from './css/index.css'; - 在webpack.config.js里module加入规则：
module:{
rules:[
{
test:/\.css$/,
use:['style-loader','css-loader']
//loader:['style-loader','css-loader']
//use:[
{
loader:"style-loader"
},{
loader:"css-loader"
}
]
}
]
}
- JS压缩:使用webpack自带的uglify:webpack.config.js里写入：
const uglify = require('uglifyjs-webpack-plugin')然后在plugins：new uglify() - HTML文件的发布:
cnpm install --save-dev html-webpack-plugin安装HTML打包插件 - 引入
const htmlPlugin = require('html-webpack-plugin');，plugins写入：
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'./src/index.html'
})
- dist目录可以删除 执行webpack的时候可以自动打包生成
- CSS中引用图片（webpack希望网页上所有的图片都以背景图片方式存在）
cnpm install --save-dev file-loader url-loader安装需要的文件和url组件module:{
rules:[
{
test:/.(png|jpg|gif)/,
use:[{
loader:"url-loader",//url-loader自带file-loader的功能
options:{
limit:50000//单位为B，超过50K在目录下生成图片，小于50K生成BASE64图片编码
outputPath:'images/' //输入以后的文件夹，这样会在dist里生成一个images文件夹} }] } ] }, - css分离
什么是css分离？前面用了import css from './css/index.css'把css引入到js里并打包成js，假设现在项目有一个小页面，交互不多，基本靠布局，那么这个页面现在只需要index.css这个文件，所以要把css从js分离出来
安装npm install --save-dev extract-text-webpack-plugin插件
引入插件：const extractTextPlugin = require('extract-text-webpack-plugin')
module下的rulestest:/.css$/,
use:['style-loader','css-loader']
换成
test:/\.css$/,
use:extractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
plugins注册：new extractTextPlugin("css/index.css")
- css分离后可能导致图片不能显示，需要把路径改成绝对路径，配置一个publicPath：
var website={
publicPath:"http://192.168.0.100:8989/"
}
output出口中配置：publicPath:website.publicPath
- 如果局部安装了webpack怎么直接webpack打包？在package.json配置：
"scripts": {
"build":"webpack"}
然后直接npm run build即可
- 如何打包html里的img标签？
安装npm install --save-dev html-withimg-loader
webpack.config.js的module>rules里加入：
{
test: /\.(htm|html)$/i,
use:[ 'html-withimg-loader']
}
这样html的文件就会被打包了。
- 打包和分离less
安装lessnpm install --save-dev less
安装less-loadernpm install --save-dev less-loader
打包less:webpack.config.js的module>rules里加入：
{
test:/\.less$/,
use:extractTextPlugin.extract({
use:[{
loader:"css-loader"
},{
loader:"less-loader"
}],
fallback:"style-loader"
})
}
- 打包和分离sass
安装sass-loadernpm install --save-dev less-loader
配置方法和less基本一样 需要注意的是test写正则的时候，sass的文件后缀是scss，所以test正则需要写成scss。
- postcss自动添加css属性前缀
安装postcss-loader：npm install --save-dev postcss-loader
安装autoprefixer（自动加前缀工具）：npm install --save-dev autoprefixer
在项目目录下新建postcss.config.js这是postcss的配置文件
在postcss.config.js里写入：
module.exports = {
plugins: [
require('autoprefixer')
]
}
在webpack.config.js的loader里引入更改css打包规则：
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true
}
}, {
loader: "postcss-loader"
}
]}
简化写法：
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
})
}
- 用webpack消除未使用的css
安装purifycss插件和依赖：npm i -D purifycss-webpack purify-css
配置全局搜索引导：const glob=require('glob')
加载purifycssconst PurifyCSSPlugin = require('purifycss-webpack');//清除无用css
webpack.config.js>plugins里写入：
new PurifyCSSPlugin({
paths:glob.sync(path.join(__dirname,'src/*.html'))//搜索html的DOM结构
})
原理：搜索匹配htmlDOM里的所有类名和id，然后对照css表里 没有使用的类名和id自动删除不加入dist的index.css
- Babel转换ES6
Babel能转换ES6 ES7等 需要很多依赖包
分别是npm install -D babel-core babel-loader babel-preset-es2015 babel-preset-react 依次：babel核心功能、babel的webpack包、babel解析es2015包、babel解析react包 babel官方说babel解析的es2015已经过时了，所以安装npm install -D babel-preset-env
在webpack.config.js里的module>rules加入
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/ //需要排除的文件夹 npm里的包不能去转换
}
然后在项目里新建一个文件专门用来配置babel：.babelrc
在.babelrc里写入类json的对象
{
"presets":["react","env"]//env代表所有的es版本 如果只解析es2015，则单独填入es2015即可。
}
- 打包后的代码调试
webpack.config.js里module.exports写入devtool:'source-map'
devtool有四种模式：
source-map 打包速度最慢 会生成独立map文件 包括调试工具的行、列
cheap-moudle-source-map 打包速度快 会生成独立map文件 不包含列
eval-source-map eval 打包速度快 没有独立map 包含行、列 缺点是有安全隐患 只能在开发环境使用
cheap-moudle-eval-source-map 打包速度快 没有列 只有行
如何选择：开发阶段的时候，如果我们的项目比较大，使用source-map比较好 如果项目比较小 适合cheap-moudle-suorce-map 不管哪种 在上线后我们都应该需要把代码调试关掉
本文由
Hansuku 创作，除注明转载/出处外，均为本站原创，转载前请务必署名
最后编辑时间为: 2017-11-06 16:02 Monday