webpack对html模板的处理,webpack的配置处理

搜索热词

1、webpack对脚本的处理

1、Js用什么loader加载？

webpack 本身就支持js的加载，

通过babel-loader ES2015 加载js,再用 babel-polyfil 做兼容性适配

2、如何处理多个入口文件？

将entry 写成一个对象的形式：entry: {

'common': ['./src/page/common/index.js'],

'index': ['./src/page/index/index.js'],

}

3、output要分文件夹存放目标文件，如何设置？

output: {

path: path.resolve(__dirname,'dist'),

publicPath:'/dist/',

filename: 'js/[name].js'

},

这样配置的文件会在根目录编译生成dist文件夹，在dist文件夹下创建js文件夹存放打包的js文件

4、如何提取公共模块？entry: {

'common': ['./src/page/common/index.js']

}

plugins: [

new webpack.optimize.CommonsChunkPlugin({

name: "common",

filename: "js/base.js"

}),

]

2、webpack对样式的处理

1、样式使用怎样的loader？

2、webpack将css打包成js模块，但是css不想在js运行完才开始加载，想把css打包成单独的css文件该如何处理？var ExtractTextPlugin = require("extract-text-webpack-plugin");

var config = {

module: {

loaders: [

{

test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")

},{

test: /\.(png|gif|jpg|woff|svg|eot|ttf|ico)\??.*$/,loader: "url-loader?limit=100&name=resource/[name].[ext]"

},{

test:/\.string$/,loader:'html-loader',query:{//告诉html-loader在加载文件的时候做最小化压缩minimize:true,//指定是否要删除属性上的引号removeAttributeQuotes:false

}

}

]

},plugins: [//把CSS单独打包到文件里new ExtractTextPlugin('css/[name].css'),//独立通用模块到js/base.js new webpack.optimize.CommonsChunkPlugin({

name: "common",filename: "js/base.js"

}),//html模板的处理new HtmlWebpackPlugin(getHtmlConfig('index',"首页")),]

}

3、webpack对html模板如何处理？

不对html处理时，会出现什么问题：

1、在引入css文件时，在后面是需要加版本号的，并且这个版本号是不能用手工来维护的，每次上线会把这个版本号改掉

2、html是在src文件夹下，没有在打包形成的dist文件夹下，在发布的时候会只发布dist文件夹下，而src文件夹下是不管的，所以文件的位置也是不对的

处理方法：const HtmlWebpackPlugin = require('html-webpack-plugin');

//获取html-webpack-plugin参数的方法var getHtmlConfig=function (name,title) {return {

template:'./src/view/'+name+'.html',filename:'view/'+name+'.html',favicon:'./favicon.ico',//inject:true时，不用手动引入js与css文件，它会自动的注入到html页面inject:true,//hash会在我们引入的js与css后面加一个版本号hash:true,chunks:['common',name],title:title

};

};

var config = {

plugins: [

//html模板的处理　　new HtmlWebpackPlugin(getHtmlConfig('index',　　new HtmlWebpackPlugin(getHtmlConfig('list',"商品列表")),　　new HtmlWebpackPlugin(getHtmlConfig('detail',"商品详情"))

]

}

4、webpack-dev-server 自动编译处理//环境变量的配置dev /onlinevar WEBPACK_ENV=process.env.WEBPACK_ENV||'dev';

if('dev'===WEBPACK_ENV){

config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');

//common 模块时公共模块，已经打包进每一个页面，而webpack-dev-server 需要监控到每一个页面的变化，所以将webpack-dev-server路径添加进common的路径数组中}

总结

以上是编程之家为你收集整理的webpack的配置处理全部内容，希望文章能够帮你解决webpack的配置处理所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。