码迷,mamicode.com
首页 > Web开发 > 详细

webpack教程

时间:2016-11-22 22:32:54      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:output   export   node.js   require   ini   ade   save   rac   build   

安装

首先要安装 Node.js, Node.js 自带了软件包管理器 npm

$ npm init$ npm install webpack --save-dev
$ npm install html-webpack-plugin --save-dev;
$ npm installextract-text-webpack-plugin--save-dev
$ npm installstyle-loader css-loader url-loader babel-loader sass-loader file-loader --save-dev
//webpack.config.js
var webpack = require(‘webpack‘);
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
module.exports = {
entry: {
"p1" : "./js/entry.js",
"p2" : "./program.js"
},
output: {
path: ‘./build‘,
filename: "js/[name].min.js",
publicPath: "../"
},
module: {
loaders: [
/*{test: /\.css$/, loader: ‘style!css‘}*/
{test:/\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
{ test: /\.(png|jpg)$/,loader:‘url?limit=8192&name=img/[hash:8].[name].[ext]‘}
]
},
plugins:[
new webpack.BannerPlugin(‘This file is create by limei‘),
/*new ExtractTextPlugin("./css/styles.css"),*/
new ExtractTextPlugin("css/[name].min.css"),
new webpack.optimize.CommonsChunkPlugin(‘js/common2.js‘),
new HtmlWebpackPlugin({
title: ‘My App‘,
filename: ‘./html/admin.html‘,
inject:‘body‘,
chunks:[‘p1‘,‘p2‘,‘js/common2.js‘] // 这个模板对应上面那个节点
})
]
}

webpack教程

标签:output   export   node.js   require   ini   ade   save   rac   build   

原文地址:http://www.cnblogs.com/heyinwangchuan/p/6088801.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!