webpack基础配置梳理梳理

首先来一个示例的目录结构
--- Application |--- Home | |--- View (线上用户访问的.html目录) --- Public (线上资源文件目录) |--- js |--- images |--- css |--- ... --- source (前端开发目录) |--- index (一个业务需求模块,每一个业务需求模块下会有不少页面) | |--- index (index 页面) | | |--- images | | |--- index.html | | |--- app.vue | | |--- index.js | | |--- style.scss | | |--- ... | |--- topics (topics 页面) | | |--- images | | |--- topics.html | | | ... |--- crowd (另一个业务需求模块,每一个业务需求模块下会有不少页面) | |--- index | | |--- index.html

一 webpack的基本项配置

module.exports = { entry: {}, //路口 output: { }, //输出出口 module: { loaders: [ ] }, babel: { //配置babel "presets": ["es2015"], "plugins": ["transform-runtime"] }, plugins: [ ],//编译的时候所执行的插件数组 vue: { },//vue的配置,须要单独出来配置 devtool : "source-map" //调试模式 };

二 入口entry

//须要用到glob模块 var glob = require('glob'); var getEntry = function () { var entry = {}; //首先咱们先读取咱们的开发目录 glob.sync('./source/**/*.js').forEach(function (name) { var n = name.slice(name.lastIndexOf('source/') + 7, name.length - 3); n = n.slice(0, n.lastIndexOf('/')); //接着我对路径字符串进行了一些裁剪成想要的路径 entry[n] = name; }); /** * entry = { * 'crowd/index' : './source/crowd/index/index.js', * 'index/index' : './source/index/index/index.js' * } * **/ //最后返回entry 给 webpack的entry return entry; };

三 输出的文件output

output: { //输出位置 path: path.resolve(__dirname, './public/'), //配置输出路径 filename: './js/[name].js' //文件输出形式 //关于filename 咱们有个变量就是 [name] = entry的key 固然还有别的变量好比[id],[hash]等,你们能够自行发挥 //咱们也能把filename写成 filename : [name]/[name].[name].js 也是能够的 },

四 加载css、style等样式模块的loader

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

五 配置环境NODE_ENV

var vueLoader = { js: 'babel', css: ExtractTextPlugin.extract("vue-style-loader", "css-loader"), sass: ExtractTextPlugin.extract("vue-style-loader", "css-loader", 'sass-loader') }; if (process.env.NODE_ENV === 'production') { //判断是否为生产环境 module.exports.vue.loaders = vueLoader; module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: '"production"' } }), new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false } }), new webpack.optimize.OccurenceOrderPlugin() ]); } else { //不是生产环境则配置devtool 调试 module.exports.devtool = 'source-map'; }