首页 > 代码库 > webpack教程

webpack教程

安装

首先要安装 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.jsvar 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教程