webpack - 最热门的前端资源模块化管理和打包工具
简单设置(单页面)
- 先安装webpack npm install webpack --save-dev.
- 在package.json里添加写脚本方便使用.
"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"
npm run webpack 就可以起到--config webpack.config.js效果.
-
webpack.config.js文件配置如下:
//先安装htmlwebpackplugin npm install htmlwebpackplugin --save-dev var htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { // context:上下文环境 = 根目录, entry: { main:'./src/js/main.js', bain: './src/js/bain.js' }, output: { //输出路径 path: './dist', //这里的[hash][chunkhash]指的其实就是版本号，MD5算法保证文件的唯一性 filename: 'js/[name]-[chunkhash].js', //代码发布时的 地址 publicPath: 'http://aili.com/' }, plugins: [ new htmlWebpackPlugin({ // filename: 'index-[hash].html',filename: 'index-[chunkhash].html',生成后的文件名 filename: 'index.html', //模板文件,就是项目根目录的index.html template: 'index.html', //将引入文件插入到哪里,body,head,false inject: 'body', title:'webpack is fuck', date: new Date(), //插件的参数: 删除注释空格之类的其他可以去插件官网找 minify:{ removeComments:true, collapseWhitespace: true } }) ] }
多页面设置
分别有a.js,b.js,c.js
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// context:,
entry: {
main:'./src/js/main.js',
// bain: './src/js/bain.js',
a: './src/js/a.js',
b: './src/js/b.js',
c: './src/js/c.js'
},
output: {
path: './dist',
filename: 'js/[name].js',
publicPath: 'http://aili.com/'
},
plugins: [
new htmlWebpackPlugin({
// filename: 'index-[hash].html',
filename: 'index.html',
template: 'index.html',
inject: 'body',
title:'webpack is fuck',
date: new Date(),
minify:{
removeComments:true,
collapseWhitespace: true
}
}),
new htmlWebpackPlugin({
// filename: 'index-[hash].html',
filename: 'a.html',
template: 'index.html',
// inject: 'body',
inject: false,
title:'This is a.html',
//chunks：引用哪些js,这里用到的公用main.js和a.js
chunks: ['main','a']
}),
new htmlWebpackPlugin({
// filename: 'index-[hash].html',
filename: 'b.html',
template: 'index.html',
// inject: 'body',
inject: false,
title:'This is b.html',
chunks: ['main','b']
}),
new htmlWebpackPlugin({
// filename: 'index-[hash].html',
filename: 'c.html',
template: 'index.html',
// inject: 'body',
inject: false,
title:'This is c.html',
chunks: ['main','c']
}),
]
}
这里遇到一个问题，公用的main和对应的各个js不用htmlwebpackplugin.chunks怎么实现？
-
可以自己配置个参数然后循环plugins判断是否是当前配置的参数
new htmlWebpackPlugin({
// filename: 'index-[hash].html',
filename: 'a.html',
template: 'index.html',
inject: 'body',
title:'This is a.html',
//自定义参数
isThat_a:true
})
然后再对应的文件下(这里是a.js)循环插件参数<% for(var key in htmlWebpackPlugin.options){%>
<%= key%> : <%= JSON.stringify(htmlWebpackPlugin.options[key])%>
if(isThat_a){<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.a.entry %>">
</script>}
<%}%>
Loaders
loader - Babel
loader使用方法 - 其中介绍了三种方法 require configuration cli.
-
require:
require("./loader!./dir/file.txt"); require("jade!./template.jade"); require("!style!css!less!bootstrap/less/bootstrap.less"); -
configuration:
{ module: { loaders: [ { test: /\.jade$/, loader: "jade" }, // => "jade" loader is used for ".jade" files { test: /\.css$/, loader: "style!css" }, // => "style" and "css" loader is used for ".css" files // Alternative syntax: { test: /\.css$/, loaders: ["style", "css"] }, ] } }我用了第二种(
configuration),先下载babel npm install babel--save-dev.更改配置文件Babel-官网插件 - 这里用到的插件presets.当然得先下载npm install babel-preset-latest(
这里可以是2015 2016 2017 latest).var htmlWebpackPlugin = require('html-webpack-plugin'); //引用nodejs自带的path模块 var path = require('path'); module.exports = { context:__dirname, entry: './src/app.js', output: { path: './dist', filename: 'js/[name].bundle.js', }, module: { loaders:[ { //js test:/\.js$/, loader:'babel', //tigao 打包速度 exclude:path.resolve(__dirname, "node_modules"), //include:'./src', query:{ presets:['latest'] } } } ] }, plugins: [ new htmlWebpackPlugin({ // filename: 'index-[hash].html', filename: 'index.html', template: 'index.html', inject: 'body' }) ] }
loader - css
-
npm install style-loader+css-loader+postcss-loader+autoprefixer --save-dev
其中：loader: "style-loader!css-loader!'postcss-loader" , loader:['style-loader','css-loader','postcss-loader'] //这两个写法一样
autoprefixer调用方法:在根目录下添加postcss.config.js文件或在webpack.config.js文件里增加postcss模块
module.exports = {
plugins: [
require('autoprefixer')({ browsers: ["last 5 versions"] })
]
}
loader - less+sass
分别安装less sass
npm install less -save-dev
-
npm install less-loader --save-dev
{
test: /.less$/,
loader: "style-loader!css-loader!postcss-loader!less-loader"
}
loader - HTML
npm-install html-loader --save-dev
写个layer.js
import tpl from './layer.html';
import './layer.less';
function layer(){
return {
name:'layer',
tpl:tpl
};
alert("Im layer");
}
export default layer;
layer.html
<div class="layer">
<div>This is Layer!!!</div>
</div>
app.js(入口js)
import './css/common.css';
import layer from './components/layer/layer.js';
const App = function (){
var dom = document.getElementById("app");
var layer_r = new layer();
dom.innerHTMl = layer_r;
}
new App();
然后直接在index.html中定义好用这个模块的加载点就ok.(<div id="app"></div>)
its work！！ amazing man
[图片上传失败...(image-962629-1529468515878)]
loader - template
这里我用ejs模板 npm install ejs-loader --save-dev
{
test: /\.tpl$/, //这里可以自定义文件后缀,只用定义加载的模板文件即可
loader: "ejs-loader"
}
layer.tpl
<div class="layer">
<div> this is the mustache-syntax - {{ this is the <%= name %> layer}}
<br/>
<% for(var i = 0;i<arr.length;i++) {%>
<%= arr[i]%>
<%}%>
</div>
</div>
layer.js
import tpl from './layer.tpl';
import './layer.less';
function layer(){
return {
name:'layer',
tpl:tpl
};
alert("Im layer");
}
export default layer;
app.js
import './css/common.css';
import layer from './components/layer/layer.js';
const App = function (){
var dom = document.getElementById("app");
var layer_r = new layer();
dom.innerHTML=layer_r.tpl({ //这里对象里的值就是在 layer.js中定义的对象。
name:'My name is Aili',
arr:['webpack','grunt','gulp']
});
}
new App();
its work!!!
loader - image
图片有三种引用方式
- 模板文件用 <img>
- css - background
- 还有index.html <img>
- npm install file-loader --save-dev
webpack.config.js:
{
test:/\.(png|jpg|gif|svg)$/i,
loader:"file-loader"
}
模板文件用到的图片要做点处理:
本应是(<img src = "相对地址"> ---> <img src="${ require('相对地址') }" />)
最后优化图片加载 - file-loader(更改打包后文件的存放地址)+url-loader(转换为编码)+image-webpack-loader(压缩图片) 这三个配合使用效果更好。
so npm install 剩余的两个loader即可
所以最后配置文件变成了:
{
test:/\.(png|jpg|gif|svg)$/,
//url-loader的param: limit:图片压缩后大小超过1k，就转换成base64编码。
loaders:["url-loader?limit:1000&name:assets/[name]-[hash:5].[ext]","image-webpack-loader"]
}
这只是打包和loader的基本配置，后续我在更新成开发环境的hot-reload等插件，webpack小白一枚。
代码地址
- Github：@github
