我刚开始使用webpack是一种痛苦体验，我感觉到webpack的各种凌乱。不过等我等我理清思路之后。总的一句话：本质上，就是输出html、 css、 js、 img文件的过程。要想弄懂webpack，首先得弄懂webpack的webpack.config.js配置文件是至关重要的。
配置文件重要的几个属性 ：1、entry 2、output 3、module 4、externals 5、plugins，
配置步骤如下
1.下载module模块，代码npm init
2.建立Webpack.config.js
①对js的打包，entry ==> output==>js/*.js
②对Css的单独打包extractTextplugin ==>css/*.css
③对css通用样式的打包commonChunkplugin ==>css/base.css
④对html的打包html-webpack-plugin ==>view/*.html
⑤html引入css和js htmlwebpackpluginchunks:['common',name]
⑥引入字体，图片等资源，用url-loader
⑦配置Webpack-dev-server的inline模式：
1.Html文件添加webpack-dev-server/client?http://localhost:8088/
2.配置环境变量：
var WEBPACK_ENV = process.env.WEBPPACK_ENV || 'dev';
console.log(WEBPACK_ENV);
3.window系统配置文件package.json的script，添加
"dev_win": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8088",
配置代码如下
'use strict';
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//配置环境变量
var WEBPACK_ENV = process.env.WEBPPACK_ENV || 'dev';
console.log(WEBPACK_ENV);
//css单独打包插件
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var getHtmlConfig = function(name ,title){
//html配置
return {
template : './src/view/' + name + '.html',//html入口
filename : 'view/' + name + '.html',//html出口
title : title,//首页标题
inject : true,
hash : true,
chunks : ['common', name]//添加css/js--------common代表通用样式css，name代表对应css和js的文件
};
};
var config = {
entry: {
common : ['./src/page/common/index.js'],//js入口
index : ['./src/page/index/index.js'],
login : ['./src/page/login/index.js']
},
output: {
path : './dist',//打包存放的地址,
publicPath : '/dist',//访问地址
filename : 'js/[name].js'//js出口
},
externals : {
jquery : 'window.jquery'//jquery的引用
},
module: {
//css样式的loader
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader")},
//字体、图片的处理loader
{ test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]'}
]
},
plugins :[
//css单独样式的处理
new ExtractTextPlugin('css/[name].css'),//css出口
//css公共样式的处理
new webpack.optimize.CommonsChunkPlugin({
name : 'common',
filename : 'js/base.js'
}),
new HtmlWebpackPlugin(getHtmlConfig('index', '首页')),//html总出口
]
};
if('dev' === WEBPACK_ENV){
config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}
module.exports = config;
以上仅为个人学习总结，精工学习
网友评论