webpack的配置处理

前端之家收集整理的这篇文章主要介绍了webpack的配置处理前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、webpack对脚本的处理

  1、Js用什么loader加载?

webpack 本身就支持js的加载,

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

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

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

  1. entry: {
  2. 'common': ['./src/page/common/index.js'],
  3. 'index': ['./src/page/index/index.js'],
  4. }
  5.   3output要分文件夹存放目标文件,如何设置?
  6. output: {
  7. path: path.resolve(__dirname,'dist'),
  8. publicPath:'/dist/',
  9. filename: 'js/[name].js'
  10. },

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

  4、如何提取公共模块?

  1. entry: {
  2. 'common': ['./src/page/common/index.js']
  3. }
  4. plugins: [
  5. new webpack.optimize.CommonsChunkPlugin({
  6. name: "common",
  7. filename: "js/base.js"
  8. }),
  9. ]

2、webpack对样式的处理

  1、样式使用怎样的loader?

  2、webpack将css打包成js模块,但是css不想在js运行完才开始加载,想把css打包成单独的css文件该如何处理?

  1. var ExtractTextPlugin = require("extract-text-webpack-plugin");
  2. var config = {
  3. module: {
  4.     loaders: [
  5.         {
  6.             test: /\.css$/,loader: ExtractTextPlugin.extract("style-loader","css-loader")
  7.         },{
  8.             test: /\.(png|gif|jpg|woff|svg|eot|ttf|ico)\??.*$/,loader: "url-loader?limit=100&name=resource/[name].[ext]"
  9.         },{
  10.             test:/\.string$/,loader:'html-loader',query:{//告诉html-loader在加载文件的时候做最小化压缩minimize:true,//指定是否要删除属性上的引号removeAttributeQuotes:false
  11.             }
  12.         }
  13.     ]
  14. },plugins: [//把CSS单独打包到文件里new ExtractTextPlugin('css/[name].css'),//独立通用模块到js/base.js new webpack.optimize.CommonsChunkPlugin({
  15.         name: "common",filename: "js/base.js"
  16.     }),//html模板的处理new HtmlWebpackPlugin(getHtmlConfig('index',"首页")),]
  17. }

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

  不对html处理时,会出现什么问题:

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

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

  处理方法: 

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  2. //获取html-webpack-plugin参数的方法var getHtmlConfig=function (name,title) {return {
  3. 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
  4.     };
  5. };
  6. var config = {
  7. plugins: [
  8. //html模板的处理  new HtmlWebpackPlugin(getHtmlConfig('index',  new HtmlWebpackPlugin(getHtmlConfig('list',"商品列表")),  new HtmlWebpackPlugin(getHtmlConfig('detail',"商品详情"))
  9. ] 
  10. }

  4、webpack-dev-server 自动编译处理

  1. //环境变量的配置dev /onlinevar WEBPACK_ENV=process.env.WEBPACK_ENV||'dev';
  2. if('dev'===WEBPACK_ENV){
  3. config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
  4. //common 模块时公共模块,已经打包进每一个页面,而webpack-dev-server 需要监控到每一个页面的变化,所以将webpack-dev-server路径添加进common的路径数组中}

猜你在找的安装教程相关文章