webpack.config.js文件const path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require("extract-text-webpack-plugin");var HtmlWebpackPlugin = require('html-webpack-plugin');//获取html-webpack-plugin参数的方法var getHtmlConfig = function(name){ return { template: './src/view/'+ name + '.html', filename: 'view/' + name+ '.html', inject : true, hash : true, chunks : ['common',name], };};//webpack configvar config = { entry: { 'common': ['./src/page/common/index.js'], 'index' : ['./src/page/index/index.js'], 'login' : ['./src/page/login/index.js'], }, output: { path: path.resolve(__dirname, './dist'), filename: 'js/[name].js' }, externals: { 'jquery': 'window.jQuery', }, module: { loaders:[ {test: /\.html$/, loader: "html-loader"}, {test: /\.css$/, loader: ExtractTextPlugin.extract("css-loader")}, ] }, plugins: [ //独立通用模块到js/base.js new webpack.optimize.CommonsChunkPlugin({ name:'common', filename: 'js/base.js' }), //把css单独打包到文件里 new ExtractTextPlugin("css/[name].css"), //html模板的处理 new HtmlWebpackPlugin(getHtmlConfig('index')), new HtmlWebpackPlugin(getHtmlConfig('login')), ], }; module.exports = config;index.html文件<!DOCTYPE html><html><%= require('html-loader!./layout/html-head.html') %><body><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script></body></html>html-header.html文件<head> <meta charset="utf-8"></head>打包后的index.html,成功加载了css文件，html还是<%= require('html-loader!../layout/html-head.html') %><!DOCTYPE html><html><head><link href="../css/index.css?59cac163000548d735ac" rel="stylesheet"></head><%= require('html-loader!../layout/html-head.html') %><body><script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript" src="../js/base.js?59cac163000548d735ac"></script><script type="text/javascript" src="../js/index.js?59cac163000548d735ac"></script></body></html>
4 回答
- 4 回答
- 1 关注
- 3976 浏览
添加回答
举报
0/150
提交
取消