达维营-前端网一、对webpack的一些理解
webpack支持CommonJS的书写形式。
CommonJS指一个文件一个模块，但会一次性加载（即同步加载），但在浏览器端不适用这种方式，加载速率什么的，于是引入了异步加载，其中有CMD（sea.js）与AMD（require.js）。
CMD:define(function (require, exports, module) {})延迟加载的方式，等用到资源了再加载，
AMD:define(“alpha”, [“require”, “exports”, “beta”], function (require, exports, beta) {})提前加载的方式，用的时候资源已经加载完成
abc.js
document.write(require('./module.js')) // 添加模块
module.js
module.exports = 'It works from module.js.'
要上是引用模块的方式
二、安装使用
1.全局安装webpack
npm install webpack -g
2.建立一个package.json
npm init
3.安装webpack依赖
npm install webpack --save-dev
4.使用webpack开发工具，安装webpack-dev-server此时的outpath中没有输出，需要webpack -p发布了才有
npm install webpack-dev-server --save-dev
注：使用–save-dev的目的是使将所安装的依赖加入到package.json中。
5.调试时执行命令
webpack-dev-server --progress --colors
6.发布
webpack -p
三、webpack.config.js的常用功能及配置
1.entry:设置入口。存放主文件
2.output:设置输出
path:输出文件路径
filename:输出文件名称
publicPath:设置资源访问路径，即localhost:8080直接在该目录下访问，否则从根目录下访问
3.loader:Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换
test:匹配希望处理文件的路径
exclude:匹配不希望处理文件的路径
loader:此处xxx-loader可以简写为xxx，？后以query方式传递给loader参数
处理JS
{
test: /\.js$/,
exclude: /node_modules|vue\/src|vue-router\//,
loader: 'babel'
//babel可以让我们在编写代码时使用ES6的版本
}
处理css
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
"style-loader",
"css-loader?sourceMap"
)
//loader: "style!css" //用css-loader解析，再用style-loader解析
}, {
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
//loader: "style!css!less"//先用less-loader解析，再用css-loader解析，再用style-loader解析
}
以上使用extract-text-webpack-plugin将css从js代码中抽出并合并，如不需要则使用注释的代码
处理图片与字体
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192' // <= 8kb的图片base64内联
},
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10000&minetype=application/font-woff'
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10&minetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10&minetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url?limit=10&minetype=image/svg+xml'
}
解析vue
{
test: /\.vue$/,
loader: 'vue-loader'
}
四、插件的使用
1.
plugins: [
new webpack.BannerPlugin('This file is created by pcd')
]
生成文件的顶部会出现这句话”This file is created by pcd”.
2.在package.json中加入
"scripts": {
"dev": "BUILD_DEV=1 webpack-dev-server --progress --colors",
"build": "BUILD_PRERELEASE=1 webpack -p"
}
开发
npm run dev
发布
npm run build
一下贴出我在vue.js简单配置的代码
webpack.config.js
var webpack = require('webpack')
module.exports = {
entry: [
'./src/main.js'
],
output: {
/* path: __dirname + "/dist/js",
publicPath: __dirname + "/dist/", *///也可以使用gulp下定义文件的路径
filename: "app.js"
},
watch: true,
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.vue$/,
loader: 'vue'
}
]
},
babel: {
presets: ['es2015'],
plugins: ['transform-runtime']
},//为了支持mian.js中的import的ES6的语法
plugins: [
new webpack.BannerPlugin('This file is create by aaa')
]
}
gulpfile.js
var gulp = require('gulp');
var webpack = require('webpack-stream');
var connect = require('gulp-connect');
gulp.task('webpack', function() {
return gulp.src('src/main.js')
.pipe(webpack(require('./webpack.config.js')))
.pipe(gulp.dest('dist/js/'))
.pipe(connect.reload());
});
gulp.task('webserver', function() {
connect.server({
livereload: true,
root: 'dist'
});
});
gulp.task('build.index', function(){
return gulp.src('index.html')
.pipe(gulp.dest('./dist'));
});
gulp.task('default', ['webpack', 'webserver','build.index']);