webpack
解析js文件,无法解析的文件需要借助loader
安装
cnpm i webpack --save-dev//最新版本
cnpm i webpack@3.0.0 --save-dev//3.0.0版本
cnpm i webpack@^3.0.0 --save-dev//3.0.0以上4.0.0以下版本
基础插件
- html-webpack-plugin用于生成页面(适合多页面)
- extract-text-webpack-plugin 抽取文本
- UglifyJsPlugin/new webpack.optimize.UglifyJsPlugin()合并压缩js
- CommonsChunkPlugin/new webpack.optimize.CommonsChunkPlugin()抽取公共模块(适合多页面)
- clean-webpack-plugin打包前清除文件
- copy-webpack-plugin文件复制
常用loader
- 解析css文件 css-loader
- 解析sass、less、scss、stylus文件 sass-loader/less-loader/node-loader
- 解析图片(png、jpg、svg、gif) file-loader/url-loader
- 给css添加前缀 postcss-loader autoprefixer
ES6插件
- “babel-core”
- “babel-loader”
- “babel-preset-env”
.babelrc 文件:
{
"presets": ["env"]
}
npm插件发布(vue&webpack&单页面)
- npm init =>package.json
- 创建.vue文件 =>插件界面及功能
- index.js =>入口文件
- webpack打包 =>webpack.config.js
- 测试=>
this.$tips.show();
- npm发布=>
npm adduser
npm publish
- npm更新=>修改 package.json中的版本号,然后
npm publish
关键index.js
import TipsComponent from './vue-tips.vue'
let Tips={}
//必须install
Tips.install=function(Vue,options){
var opt={}
for(let key in options){
opt[key]=options[key]
}
Vue.prototype.$tips=function(option){
if(typeof option=='object'){
for(let key in option){
opt[key]=option[key]
}
}
//extand继承,实例
const TipsController=Vue.extend(TipsComponent)
//mount挂载,得到新实例
var instance=new TipsController().$mount(document.createElement("div"))
document.body.appendChild(instance.$el)
}
Vue.prototype.$tips['show']=function(option){
Vue.prototype.$tips(option);
}
}
if(window.Vue){
Vue.use(Tips)
}
export default Tips
webpack.config.js
var path=require('path')
module.exports={
entry:'./src/lib/index.js',
output:{
path:path.join(__dirname,'./dist'),
filename:'vue-tips.js'
libraryTarget:'umd',//输出规范,amd\cmd\commonjs
library:'VueTips'//输出
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader',
options:{
loaders:{
scss:'style-loader!css-loader!sass-loader'
}
}
},
{
test:/\.js$/,
loader:'babel-loader',
include:path.join(__dirname,'src'),
exclude:/node_modules/
}
]
},
plugins:[
]
}
调试心得(vue相关)
1.v-for与数组:增加:push();修改 splice(index,1,val);删除splice(index,1)
2.v-if与关闭功能:
//v-for循环时,选中的当前列(要删除的)不渲染
v-if="currentIndex!=index"
//点击删除
@click="currentIndex=index"
多页面构建
webpack.config.js
var path=require('path')
var HtmlWebpackPlugin=require('html-webpack-plugin')
var CleanWebpackPlugin =require('clean-webpack-plugin')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack=require('webpack')
module.exports={
entry:{
vendor:['jquery','./src/js/common.js'],
index:'./src/js/index.js',
cart:'./src/js/cart.js'
},
output:{
path:path.join(__dirname,'./dist'),
filename:'js/[name].js',
publicPath:''
},
module:{
rules:[
{
test:/\.js$/,
include:path.join(__dirname,'src'),
exclude:/node_modules/,
loader:'babel-loader'
},
{
test: /\.css$/,
include:path.join(__dirname,'src'),
exclude:/node_modules/,
//抽取css文件生成单独的文件,调用
/*use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})*/
loader:'style-loader!css-loader'//将css直接插入到html文件,嵌入文本
}
]
},
plugins:[
//每次webpack时先清除dist
new CleanWebpackPlugin(['./dist'],{
root:path.join(__dirname,''),
exclude:/node_modules/,
verbose:true,
dry:false
}),
//抽取公共模块,index、cart、vendor都包含common
new webpack.optimize.CommonsChunkPlugin({
name:'vendor',
chunks:['index','cart','vendor'],
mikChunks:3
}),
//压缩js
new webpack.optimize.UglifyJsPlugin({
compress:{
warnings:true//注释不压缩掉
}
}),
//HTML页面生成,多个
new HtmlWebpackPlugin({
filename:'index.html',
template:'./src/index.html',
chunks:['index','vendor'],//引用的js
//压缩,注释空格
minify:{
removeComments:true,
collapseWhitespace:true
}
}),
new HtmlWebpackPlugin({
filename:'cart.html',
template:'./src/cart.html',
chunks:['cart','vendor'],
minify:{
removeComments:true,
collapseWhitespace:true
}
}),
//抽取文本
new ExtractTextPlugin('css/base.css'),
//全局配置jquery
new webpack.ProvidePlugin({
$:'jquery',
jQuery:'jquery',
'window.jQuery':'jquery'
})
],
//devtool:'#source-map'
}