第1章 webpack 安装以及命令行
使用npm初始化项目
cnpm init
安装webpack
cnpm install webpack --save-dev
打包文件
webpack hello.js hello.bundle.js
安装css-loader,style-loader处理css
cnpm install css-loader style-loader --save-dev
第2章 webpack 基本配置
官网配置：https://webpack.js.org/configuration/
默认情况下，执行 webpack 命令会在当前目录下找配置文件webpack.config.js
也可以在命令行上指定配置文件
webpack --config webpack.dev.config.js
通过package.json配置webpack:
{
"name": "02starter",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack": "webpack --config webpack.config.js --display-modules --colors --progress"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.2.1"
}
}
第三章 自动化生成项目中的html页面
安装插件
cnpm install html-webpack-plugin --save-dev
配置 html-webpack-plugin
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/script/main.js', //配置入口文件
output:{
path:'./dist', //配置打包后文件的存放位置
filename:'js/[name]-[hash].js', //配置打包后文件的名字
publicPath:'http://cdn.com' //配置上线地址，打包后所有js的引用地址都会被替换
},
plugins:[
new htmlWebpackPlugin({
filename:'index-[hash].html',
template: 'index.html', //配置模版文件
inject:'head', //嵌入到什么位置 默认是body
title:'webpack tutorial starter....',
minify:{ //配置压缩
removeComments:true, //删除注释
collapseWhitespace:true //删除空格
}
})
]
}
在模版文件中取 插件配置的参数
<!DOCTYPE html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
</body>
</html>
查看htmlWebpackPlugin中有哪些配置参数
<!DOCTYPE html>
<html>
<head>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<% for (var key in htmlWebpackPlugin.files) { %>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key])%>
<% } %>
=====================
<% for (var key in htmlWebpackPlugin.options) { %>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key])%>
<% } %>
</body>
</html>
chunks ： 指定对当前模版有用的chunk
excludeChunks: 与chunks 相反
第四章 处理项目中的资源文件
babel-loader官网：http://babeljs.io/docs/setup/#installation 把 es6 语法解析成浏览器能够识别的语言
安装 babel
cnpm install babel-loader babel-core babel-preset-env --save-dev
配置 babel-loader
module:{
loaders: [
{
test: /\.js$/,
exclude: '', //过滤文件夹 只能是绝对路径 或者 正则表达式
include: './src/',
loader: 'babel-loader',
query: {
presets: ['env'] //选择使用的preset
}
}
]
}
exclude 配置详解：https://webpack.js.org/configuration/module/#condition
处理项目中的 css
{
test:/\.css$/,
loader:'style-loader!css-loader'
}
安装 postcss-loader ，对于一些浏览器支持不太好的css 添加一些前缀，让不同浏览器支持
cnpm install postcss-loader --save-dev
cnpm install autoprefixer --save-dev
参考配置：
{
test:/.css$/,
use: [
{
loader:'style-loader'
},
{
loader:'css-loader?importLoaders=1' //指定在css-loader之后 通过 @import 导入的css需要经过几个loader处理， 因为后面只有一个
postcss-loader，所以 = 1
},
{
loader:'postcss-loader',
options: {
plugins: function () {
return [
require('autoprefixer')
];
}
}
}
]
}
使用 less 和 sass
cnpm install less-loader --save-dev
配置 less-loader:
{
test:/\.less$/,
loader:'style-loader!css-loader!postcss-loader!less-loader'
}
处理模板文件
cnpm install html-loader --save-dev
{
test:/\.html$/,
loader:'html-loader'
}
处理图片以及其他文件
cnpm install file-loader --save-dev
{
test:/\.(png|jpg|svg|gif)$/i, // i 不区分大小写
loader:'file-loader',query: {
name: 'assets/[name]-[hash].[ext]'
}
如果在模版文件中使用到了图片，尽量使用绝对地址，
或者使用 require 加载文件
<img src="${ require('../assets/123.png') }"/>
url-loader : 和 file-loader 很类似，多了一个配置参数，limit
如果文件的大小小于配置的limit,那么 它会把文件转换成为一个base64的编码，
如果大于了配置的limit，那么会把文件直接丢给 file-loader处理
{
test: /\.(png|jpg|svg|gif)$/i,
loader: 'url-loader',
query: {
limit: 20000, //设置20k的大小限制
name: 'assets/[name]-[hash].[ext]'
}
}
image-webpack-loader: 图片压缩loader, 通常配合file-loader使用
{
test: /\.(png|jpg|svg|gif)$/i,
use: [
'url-loader?limit=60000&name=assets/[name]-[hash].[ext]',
'image-webpack-loader'
]
}
网友评论