- 什么是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