一、安装 webpack
npm i webpack -g
二、编辑 package.json
"keywords": [
"webpack"
],
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.20.0",
"babel-loader": "^6.2.10",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0",
"css-loader": "^0.27.1",
"file-loader": "^0.10.1",
"jsx-loader": "^0.13.2",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
},
三、webpack.config.js
在项目根目录下创建 webpack.config.js
var moment = require('moment');
var webpack = require('webpack');
//丑化代码的插件，即压缩代码。
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
/**var commonsPlugin = new webpack
.optimize
.CommonsChunkPlugin('common.js');*/
module.exports = {
//插件项
plugins: [
// commonsPlugin
//自动生成文件的头部注释信息。
new webpack.BannerPlugin('自动生成的文件头信息---' + moment().format('YYYY-MM-DD HH:mm:ss')),
/** 丑化代码的插件*/
new uglifyJsPlugin({
compress: {
warnings: false
}
})
],
/** 页面入口文件配置,可以同时配置多个入口
* entry中的各个key就是生成的输出文件的名字
* /
entry: {
entry01 : './entry.js',
entry02 : './app.js'
},
//入口文件输出配置
output: {
// path: 'dist/js/page',
// 图片文件的输出路径，在css中写图片路径时，
//只需写图片原来所在位置即可，webpack会自动转换成输出路径
publicPath : './dist/js/page/',
path : __dirname + '/dist/js/page/',
filename : '[name].js'
//[name]:是一个变量，会自动替换 entry中的key
},
module: {
//加载器配置
loaders: [
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.js$/, loader: 'jsx-loader?harmony' },
{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'},
//css样式中的图片加载器，url-loader 依赖于 file-loader
{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'},
//babel 转化 es6 -> es5
{
test: /\.js[x]?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query:{
presets:['react','es2015']
}
}
]
},
//其它解决方案配置
resolve: {
// root: '/usr/local/workspacelearning/wepack-learn/src', //绝对路径
extensions: ['.js', '.json', '.scss'],
alias: {
AppStore : 'js/stores/AppStores.js',
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
};
四、创建文件
1、根目录下 分别创建 entry.js 和 app.js作为 项目的入口文件，与webpack.config.js 中的entry配置项对应起来。
entry: {
entry01 : './entry.js',
entry02 : './app.js'
},
entry.js:
// 载入 style.css，如果没有配置 webpack.config.js,
//则需要这样写：require("!style-loader!css-loader!./style.css");
require("./style.css");
document.write("这是 entry.js 本身的内容！他是一个入口文件\n\n");
document.write(require("./module.js"));
app.js:
document.write('这是app.js入口文件');
(() => alert('aaa'))(); //es6语法
2、根目录下 分别创建 index.html 和 app.html
html文件中 script的引用路径为 webpack打包以后的输出路径。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="dist/js/page/entry01.js" charset="utf-8"></script>
</body>
</html>
app.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="dist/js/page/entry02.js" charset="utf-8"></script>
</body>
</html>
3、根目录下创建 css文件
style.css
body {
background: url("./images/李若彤.jpg");
}
4、根目录下创建 imgaes 目录并放入图片
五、运行打包
$ webpack
会自动在项目根目录下生成 dist/js/page目录，并在里面生成：
entry01.js
entry02.js
aebcca736390ffcc32d4698bea99b999.jpg
并将 app.js 中的 es6代码编译成 es5.
entry 是webpack 打包的入口点，它会把入口文件中所有的引用文件全部进行打包。
五、发布服务器
安装服务器
$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors
http://localhost:8080 = http://localhost:8080/index.html
http://localhost:8080/app.html
自动刷新+更改端口
//在package.json 的scripts标签中添加：
// 使用 inline方式自动刷新，当然也可以使用 iframe(webpack默认的)
"scripts":{
"start":"webpack-dev-server --inline --host localhost --port 9093 --config webpack.config.js"
}
这样就可以访问 http://localhost:9093了
