webpack配置的最佳实践分享

webpack配置的最佳实践分享

本文主要介绍了关于webpack配置的最佳实践，本文分享的实践具有以下的优势：

使用happypack提升打包速度。

使用MD5 hash可以生成文件版本，进行版本控制

在非单页面的系统中支持多个入口的配置

模板中可以利用htmlplugin输出一些配置性的信息

支持devserver，支持本地json数据的mock

一、webpack最佳实践中的需求

1.热加载

2.语法校验

3.js打包

4.模板打包

二、解决方案

1.webpack.config.json

var path = require('path');

var fs = require('fs');

var exec = require('child_process').exec;

var HappyPack = require('happypack');

var merge = require('webpack-merge');

var webpack = require('webpack');

var WebpackMd5Hash = require('webpack-md5-hash');

var HtmlwebpackPlugin = require('html-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);

var APP_PATH = path.resolve(ROOT_PATH, 'app');

var BUILD_PATH = path.resolve(ROOT_PATH, __dirname+'/devserver/public');

//取出页面文件映射

function getHtmlPluginArr() {

var data = JSON.parse(fs.readFileSync('entryconf.json', 'utf-8'));

var pageList = data.pageList;

var resultObj = {

"pluginArr": [],

"entryObj": {}

};

for (var index = 0; index < pageList.length; index++) {

var element = pageList[index];

var entry = element.entry;

//通过对app.json中src的路径截取获得分发路径

var filename = (function () {

var filenameStr = entry.split("./app/page/")[1];

return filenameStr.substr(0, filenameStr.lastIndexOf("."));

})();

var title = element.title;

var extra = element.extra;

resultObj.entryObj[filename] = entry;

//利用路径一部分来进行HtmlwebpackPlugin的chunks

resultObj.pluginArr.push(

new HtmlwebpackPlugin({

chunks: [filename], //当前页面js

title: title,

extra: extra,//包含页面额外的配置信息

template: "app/" + "template.ejs",

filename: 'views/'+filename + '.ejs',

chunksSortMode: "dependency"//按chunks的顺序对js进行引入

})

);

//HappyPack, loader多进程去处理文件

resultObj.pluginArr.push(

new HappyPack({ id: 'html' }),

new HappyPack({ id: 'css' }),

new HappyPack({ id: 'js' }),

new HappyPack({ id: 'tpl' })

);

}

return resultObj;

}

var appJsonObj = getHtmlPluginArr();

/**通用配置 */

var commonConfig = {

entry: appJsonObj.entryObj,

module: {

loaders: [

{ test: /\.html$/, loader: "html?minimize=false", happy: {id: "html"} },

{ test: /\.json$/, loader: "json" },

{ test: /\.scss|\.css$/, loaders: ["style", "css", "sass"], happy: {id: "css"} },

{ test: /\.(?:jpg|gif|png)$/, loader: 'url?limit=10240&name=images/[name]-[hash:10].[ext]' },

{ test: /\.handlebars/, loader: "handlebars", query: { helperDirs: [APP_PSjzPjATH + "/helper"] }, happy: {id: "tpl"} },

{ test: /\.js$|\.jsx$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015'] }, happy: {id: "js"} },

]

},

output: {

path: BUILD_PATH,

filename: "js/[name].js"

},

externals: {

"jquery": "jQuery"

},

//配置短路径引用

resolve: {

extensions: ['', '.js', '.json', '.scss','.vue'],

alias: {

vue : 'vue/dist/vue.js'

}

},

plugins: appJsonObj.pluginArr,

cache: true

}

module.exports = merge(commonConfig, {

output: {

publicPath: '/',

path: BUILD_PATH,

filename: "js/[name]-[chunkhash:10].js"

},

plugins: [

new webpack.optimize.UglifyJsPlugin({ minimize: true }),

new WebpackMd5Hash()

]

});

2.模板文件的配置：

<%= htmlWebpackPlugin.options.title || '上单'%>

<% if (htmlWebpackPlugin.options.extra&&htmlWebpackPlugin.options.extra.js) {%>

<% for(var i = 0;i < htmlWebpackPlugin.options.extra.js.length;i++){ %>

<% } %>

<% } %>

3.webpack.dev.config.json配置

var path = require('path');

var fs = require('fs');

var merge = require('webpack-merge');

var webpack = require('webpack');

var HtmlwebpackPlugin = require('html-webpack-plugin');

var OpenBrowserPlugin = require('open-browser-webpack-plugin');

var ROOT_PATH = path.resolve(__dirname);

var APP_PATH = path.resolve(ROOT_PATH, 'app');

var BUILD_PATH = path.resolve(ROOT_PATH, 'build');

var MODULE_PATH = path.resolve(ROOT_PATH, 'node_modules');

//取出页面文件映射

function getHtmlPluginArr() {

var data = JSON.parse(fs.readFileSync('app/entries.json', 'utf-8'));

var pageList = data.pageList;

var resultObj = {

"pluginArr": [],

"entryObj": {}

};

for (var index = 0; index < pageList.length; index++) {

var element = pageList[index];

var src = element.entry;

//通过对app.json中src的路径截取获得分发路径

var dist = (function() {

var s1 = src.split("./app/entries/")[1];

var s2 = s1.substr(0, s1.lastIndexOf("/"));

return s2;

})();

var title = element.title;

var extra = element.extra;

resultObj.entryObj[dist] = src;

//利用路径一部分来进行HtmlwebpackPlugin的chunks

resultObj.pluginArr.push(

new HtmlwebpackPlugin({

chunks: [dist], //当前页面js

title: title,

extra: extra,//包含页面额外的配置信息

template: "app/" + "template.ejs",

filename: dist + '.html',

chunksSortMode: "dependency" //按chunks的顺序对js进行引入

})

);

}

return resultObj;

}

var appJsonObj = getHtmlPluginArr();

/**通用配置 */

var commonConfig = {

entry: appJsonObj.entryObj,

module: {

loaders: [

{ test: /\.html$/, loader: "html?minimize=false" },

{ test: /\.json$/, loader: "json" },

{ test: /\.scss|\.css$/, loaders: ["style", "css", "sass"] },

{ test: /\.(?:jpg|gif|png)$/, loader: 'url?limit=10240&name=../images/[name]-[hash:10].[ext]' },

{ test: /\.handlebars/, loader: "handlebars" },

{ test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['es2015','stage-3','react'] } },

{ test: /\.jsx$/, exclude: /(node_modules|bower_components)/, loader: 'babel', query: { presets: ['react','stage-3','es2015']} }

]

},

output: {

path: BUILD_PATH,

filename: "js/[name].js"

},

externals: {

"jquery": "jQuery"

},

//配置短路径引用

resolve: {

alias: {

module: path.resolve(APP_PATH, 'module'),

service: path.resolve(APP_PATH, "services"),

component: path.resolve(APP_PATH, "components"),

entries: path.resolve(APP_PATH, "entries"),

routes: path.resolve(APP_PATH, "routes"),

node_modules: path.resolve(ROOT_PATH, 'node_modules')

},

extensions: ['', '.js', '.jsx']

},

plugins: appJsonObj.pluginArr,

devtool: "cheap-source-map",

cache: true

}

//webpack-dev-server 提供的是内存级别的server,不会生成build的文件夹

//访问路径直接参照build下的路径 如http://127.0.0.1:8080/shop/updateShop.html

module.exports = merge(commonConfig, {

devServer: {

hot: true,

inline: true,

progress: true,

host: process.env.HOST,

port: "8808",

proxy: {

'/api/getLeftBar': {

target: 'http://127.0.0.1:8808/mock',//dev

secure: false

},

'/api/getIndexData': {

target: 'http://127.0.0.1:8808/mock',//dev

secure: false

},

'/api/getblogs': {

target: 'http://127.0.0.1:8808/mock',//dev

secure: false

},

'/panda/*': {

target: 'http://10.4.233.139:8411/',//dev

secure: false

},

//转发至本地mock

'/page3/*': {

target: 'http://127.0.0.1:8808',

secure: false

}

}

},

plugins: [

new webpack.HotModuleReplacementPlugin(),

new OpenBrowserPlugin({

url: 'http://127.0.0.1:8808/test.html'

})

]

});

总结

以上就是关于webpack最佳配置的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。