入口配置多次
初始化 npm init -y
安装依赖 npm install *** --save-dev
npm install --save-dev css-loader file-loader html-loader html-webpack-plugin less less-loader style-loader url-loader jquery extract-text-webpack-plugin webpack webpack-dev-server uglifyjs-webpack-plugin
稳定版本：自己安装的最新版本会出错，安装新版本，webpack.config.js中的loader不简写
"devDependencies": {
"css-loader": "^0.23.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-loader": "^0.4.3",
"html-webpack-plugin": "^2.9.0",
"jquery": "^1.12.0",
"less": "^2.6.0",
"less-loader": "^2.2.2",
"style-loader": "^0.13.0",
"uglifyjs-webpack-plugin": "^1.1.4",
"url-loader": "^0.5.7",
"webpack": "^1.12.13",
"webpack-dev-server": "^1.14.1"
}
主要目录结构：
-root
-src
-css
+common #公共样式
+lib #引用全局样式
+page #对应页面样式
+img
-js
-view
index.html
list.html
about.html
-dist #打包输出目录，自动生成无需建立
+node_modules #使用的nodejs模块
package.json #项目配置
webpack.config.js #webpack配置
package-lock.json
src/js/page/index.js 每个页面对应的js输入需要引入的css 及 js，其它同理：例
require("../../css/lib/reset.css")
require("../../css/common/global.css")
require("../../css/common/grid.css")
require("../../css/page/index.less")
$('.g-bd').append('<p class="text">这是由js生成的一句话。</p>')
src/view 输入需要的html结构，无需引入css,js，webpack将根据入口js文件实现按需加载。
webpack.config.js
var path = require('path')
var webpack = require('webpack')
/*将你的样式提取到单独的css文件里，不用担心样式会被打包到js文件里。 */
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*html-webpack-plugin插件，重中之重，webpack中生成HTML的插件*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
/*压缩js*/
var UglifyjsPlugin=require('uglifyjs-webpack-plugin');
module.exports = { entry: { //配置入口文件，有几个写几个 index: './src/js/page/index.js', list: './src/js/page/list.js', about: './src/js/page/about.js', }, output: { path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它 publicPath: '/dist/', //模板、样式、脚本、图片等资源对应的server上的路径 filename: 'js/[name].js', //每个页面对应的主js的生成配置 chunkFilename: 'js/[id].chunk.js' //chunk生成的配置 }, module: { loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。 { test: /\.css$/, //配置css的抽取器、加载器 loader: ExtractTextPlugin.extract('style-loader', 'css-loader') }, { test: /\.less$/, //配置less的抽取器、加载器。中间!有必要解释一下， //根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入 //你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。 loader: ExtractTextPlugin.extract('css!less') }, { //html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源 //比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样 test: /\.html$/, loader: "html?attrs=img:src img:data-src" }, { //文件加载器，处理文件静态资源 test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader?name=./fonts/[name].[ext]' }, { //图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求 //如下配置，将小于8192byte的图片转成base64码 test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192&name=./img/[hash].[ext]' } ] }, plugins: [ new webpack.ProvidePlugin({ //加载jq $: 'jquery' }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk chunks: ['index','list','about'], //提取哪些模块共有的部分 minChunks: 3 // 提取至少3个模块共有的部分 }), new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath //HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个 new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值 filename: './view/index.html', //生成的html存放路径，相对于path template: './src/view/index.html', //html模板路径 inject: 'body