学习地址：
https://segmentfault.com/a/1190000006178770 http://study.163.com/course/courseMain.htm?courseId=1004835006
1.webpack：模块打包机（分析你的项目结构，找到
JavaScript模块以及其它的一些浏览器不能直接运行的拓
展语言（Scss，TypeScript等），并将其打包为合适的格
式以供浏览器使用。）
2.安装：
//全局安装
npm install -g webpack
//安装到你的项目目录
npm install --save-dev webpack
//初始化
npm init -y(生成package.json文件)
安装node.js 使用node -v查看版本号 使用nvm use 6切换版本
3.功能：
//生成Source Maps（使调试更容易）
devtool选项
配置结果可以在
查看源码 进行断点调试
source-map
cheap-module-source-map
eval-source-map（开发中经常用的）
cheap-module-eval-source-map
//使用webpack构建本地服务器
npm install --save-dev webpack-dev-server
//Loaders
test：一个匹配loaders所处理的文件的拓展名
的正则表达式（必须）
loader：loader的名称（必须）
include/exclude:手动添加必须处理的文件（文
件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）
loaders有：
处理js文件的:babel
处理css文件的:style-loader,css-
loader,postcss-loader
cssloader：
处理@import和url();
如果@import加载的是外部文件（绝对路径的地址：cdn地址），那么就跳过 只处理加载的本地资源；
处理style标签；
默认css是全局的，所以同名会造成命名冲突：(body会覆盖)
use:[
'style-loader',
{
loader:'css-loader',
options:{
modules:true
}
}
]
处理html文件的:html-loader
处理模版文件的:ejs-loader等
处理json文件的:json-loader
处理图片文件的:file-loader url-loader
image-webpack-loader
//Babel：编译JavaScript的平台 （es6,jsx等
）
npm一次性安装多个依赖模块，模块之间用空格
隔开
npm install --save-dev babel-core babel-
loader babel-preset-es2015 babel-preset-react
//css：css-loader使你能够使用类似@import
和 url(...)的方法实现 require()的功能,style-loader
将所有的计算后的样式加入页面中
CSS module：通过CSS模块，所有的类名，动画
名默认都只作用于当前模块
CSS预处理器：sass/less
PostCSS：首先安装postcss-loader 和
autoprefixer（自动添加前缀的插件）
npm install --save-dev postcss-
loader autoprefixer
4.插件（Plugins）:
在webpack配置中的plugins关键字部分添加该插件的一个实例
//HtmlWebpackPlugin：npm install
--save-dev html-webpack-plugin
//Hot Module Replacement（HMR）也
是webpack里很有用的一个插件，它允许你在修改组件代
码后，自动刷新实时预览修改后的效果。在webpack中实
现HMR也很简单，只需要做两项配置
在webpack配置文件中添加HMR插件；
在Webpack Dev Server中添加“hot
”参数；（如果不加载这个插件 就在package.json里设置hmr命令为webpack-dev-server --hot也可以）
然后在需要热模块更新的js里面配置（只有library模块更改的时候才会热加载）
适用于用户提交信息 页面也不刷新 保存状态
//OccurenceOrderPlugin :为组件分
配ID，通过这个插件webpack可以分析和优先考虑使用最
多的模块，并为它们分配最小的ID
//UglifyJsPlugin：压缩JS代码；
//ExtractTextPlugin：分离CSS和JS 文件
样式的分离：（打包的css都到了js 但是js要在文档底部才加载 当页面加载完了之后才加载js 这样页面就会闪一下）
npm install --save-dev extract- text-webpack-plugin
//image-webpack-loader 对图片就行压缩
5.其他注意
style-loader要在css-loader之前加载 use:["style-loader","css-loader"]
通过打包工具，将项目部署到服务端的全过程？配置WDS进行浏览器的自动刷新
把项目部署到服务端 使用webpack-dev-server模块 并可以指定端口 也可以配置启动命令
安装：npm install webpack-dev-server --save-dev（版本号2.4.2）
使用：在package.json里的script里面添加"start":"webpack-dev-server --entry ./src/js/show.js(输入文件) --output-filename ./dist/bundle.js（输出文件）或者webpack-dev-server --env development" 在命令行中npm start就会显示端口 在浏览器中输入localhost:8080（端口号）查看
在package.json里的scripts里面设置启动项 "scripts":{"bulid":"webpack"或者wepack --env production}直接在命令行中使用npm run bulid编译(使用快捷方式进行编译)
production模式自动压缩模式
如何实现文件打包的自动监测、修改端口方法？
开启两个终端 一个输入npm run bulid 一个输入npm start 直接刷新页面就可以看到结果
在package.json里的scripts里面设置启动项 "scripts":{"bulid":"webpack --watch(添加监测)"}只要有修改就直接bulid了
在webpack.config.js里面添加devServer:{host:"xxx.com',port:8081}修改端口 重新启动npm start
文件压缩
1.自动检测文件大小优化性能：
webpack -p（调用自身压缩的方法）
插件:npmjs.com/package/babili-webpack-plugin（推荐）
配置多页面编译
完成的配置文件： https://github.com/lhf2/webpack-demo
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const BabiliPlugin = require('babili-webpack-plugin');
const webpack = require('webpack');
module.exports = {
//自动校测文件大小
performance: {
hints: 'warning', // 'error'
maxEntrypointSize: 100000, // bytes
maxAssetSize: 450000, // bytes
},
//入口文件
entry:{
vendor:['./css/index.css','./js/jquery.js'],
1: ['./css/1.css','./js/1.js'],
2: ['./css/2.css','./js/2.js'],
},
output: {
path: path.resolve(__dirname, 'dist'),//必须使用绝对文件，输出文件夹
filename: "js/[name].js",//打包之后输出文件的文件名
//publicPath:'dist/'//知道如何寻找资源
},
//devtool:'source-map',//是调试更容易
devServer: {
hot: true//webpack2是hotOnly:true hmr的配置
},
module:{
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test:/\.js$/,//js文件才使用babel
loader: 'babel-loader',//使用哪个loader
query: {
presets: ['es2015']
},
exclude:/node_modules/,//不包括路径
},
{
//图片格式正则
test:/\.(png|jpe?g|gif|svg)(\?.*)?$/,
use:[
{
loader:'url-loader',
//配置url-loader的可选项
options:{
//限制图片大小2000B 小于限制会将图片转换为base64格式 1M = 1024KB 1KB =1024字节 一般用10k 数值是100000 因为vue限制为10k
limit:2000000,
//超出限制，创建的文件格式
//bulid/images/[图片名].[hash].[图片格式]
name:'images/[name].[ext]'
}
}
]
},
{
test: /\.(htm|html)$/,
loader: 'html-withimg-loader'//方便处理html里面加载的img标签
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
loader: 'file-loader'
},
{
test: /\.(woff|woff2|eot|ttf|otf)\??.*$/,
loader: 'url-loader?name=fonts/[name].[md5:hash:hex:7].[ext]'//处理字体图标
},
]
},
plugins:[
new htmlWebpackPlugin({
template:'./1.html',
filename:'1.html',
inject:'body',
chunks:['vendor','1']
}),
new htmlWebpackPlugin({
template:'./2.html',
filename:'2.html',
inject:'body',
chunks:['vendor','2']
}),
new webpack.LoaderOptionsPlugin({
options: {
optimization:{
splitChunks: {
minSize: 1,
chunks: "initial",
name:"vendor"
}
}
}
}),
new ExtractTextPlugin('./css/[name].css'),//把写到js里的css文件分离出来 共用的css跟自己独立的css都能被加载
new webpack.HotModuleReplacementPlugin(),//热加载 如果不加载这个插件 就在package.json里设置hmr命令为webpack-dev-server --hot也可以
new BabiliPlugin(),//压缩文件 使用这个插件必须把devtool的配置去掉 会报错
]
}
第二种配置文件 https://github.com/Jokcy/vue-todo-tech
如何自己搭建一个vue脚手架
1.初始化项目目录
npm init (项目名称一定要规范 否则会保存 不能使用中文或者特殊符号)
安装 npm i webpack vue vue-loader
根据提示信息安装依赖 npm i css-loader vue-template-compiler
2.新建文件夹（源目录）src在里面创建app.vue文件
3.创建webpack.config.js
在package.json配置"bulid":"webpack --config webpack.config.js"
//直接在命令行输入会使用去全局的webpack
npm run bulid 根据提示安装npm install webpack-cli -D --save
4.npm i cross-env（不同平台的命令不同）
在package.json 配置
"bulid": "cross-env NODE_ENV=production webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"
5.npm i postcss-loader autoprefixer babel-loader babel-core
新建postcss.config.js(加浏览器前缀)
const autoprefixer = require('autoprefixer')
module.exports = {
plugins:[
autoprefixer()
]
}
新建.babelrc
{
"presets":[
"env"
],
"plugins":[
"transform-vue-jsx"(专门转化vue里面的jsx代码)
]
}
npm i babel-preset-env babel-plugin-transform-vue-jsx
根据warn提醒安装npm install babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx
6.正式环境中使用chunkhash
npm install extract-text-webpack-plugin@next否则会报错
const path = require('path');
const htmlWebpackPlugin = require('html-webpack-plugin');
const ExtractPlugin = require('extract-text-webpack-plugin')
const webpack = require('webpack');
//判断是什么环境
const isDev = process.env.NODE_ENV === 'development'
const config = {
target:'web',//目标平台
entry:path.join(__dirname,'src/index.js'),//入口文件
output:{
filename:"bundle.[hash:8].js",//输出名称
path:path.join(__dirname,'dist')//输出目录
},
//处理文件的loader
module:{
rules:[
{
test: /\.vue$/,
loader:'vue-loader'
},
{
test:/\.jsx$/,
loader:'babel-loader'
},
{
test: /\.css$/,
use:[
'style-loader',
'css-loader',
{
loader:'postcss-loader',
options:{
sourceMap:true,
}
}
]
},
{
test: /\.(gif|jpg|jpeg|png|svg)$/,
use:[
{
loader:'url-loader',
//配置url-loader的可选项
options:{
//限制图片大小2000B(2000000) 小于限制会将图片转换为base64格式写到代码里面 减少服务器压力 1M = 1024KB 1KB =1024字节 一般用10k 数值是100000 因为vue限制为10k
limit:1024,
//超出限制，创建的文件格式
//bulid/images/[图片名].[hash].[图片格式]
name:'[name]-aaa.[ext]'
}
}
]
}
]
},
plugins:[
//存一个变量区分
new webpack.DefinePlugin({
"process.env":{
NODE_ENV:isDev?'"development"':'"production"'
}
}),
new htmlWebpackPlugin()
]
}
//判断环境是开发还是正式环境
if(isDev){
//处理stylus文件 开发环境
config.module.rules.push({
test: /\.styl/,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
})
//启动服务
config.devServer = {
port:'8000',
host:'0.0.0.0',//可以在本机内网IP访问 手机调试 访问的时候可以输入localhost:8080
overlay:{
error:true,//有任何错误显示在网页中
},
//open:true,//自动打开浏览器
hot:true,//热加载
}
config.plugins.push(
new webpack.HotModuleReplacementPlugin(),//如果不加载这个插件 就在package.json里设置hmr命令为webpack-dev-server --hot也可以
new webpack.NoEmitOnErrorsPlugin(),//减少不需要的信息展示
//方便调试
new webpack.LoaderOptionsPlugin({
options:{
devTool:'#cheap-module-eval-source-map'
}
})
)
}else{
//正式环境
config.entry = {
app: path.join(__dirname, 'src/index.js'),
vendor: ['vue']
}
config.output.filename = '[name].[chunkhash:8].js'
//分离css js 文件
config.module.rules.push(
{
test: /\.styl/,
use: ExtractPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'postcss-loader',
options: {
sourceMap: true,
}
},
'stylus-loader'
]
})
}
)
//分离内库代码
config.optimization={
splitChunks: {
minSize: 1,
chunks: "initial",
name:"vendor"
}
},
config.plugins.push(
new ExtractPlugin('styles.[contentHash:8].css')
/*new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
})*/
)
}
module.exports = config;
浙公网安备 33010602011771号