webpack教程

Posted 2020-08-20 犹记惊鸿照影（JS）

安装

首先要安装 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‘] // 这个模板对应上面那个节点
})
]
}