如何打造一个令人愉悦的前端开发环境（二）

前情提要

上一篇文章介绍了目前前端比较流行的各种编辑器，以及各种流行的打包方式，***给了一个Gulp的例子，这个例子还是14年的时候写的，还有一些可以优化的空间，就不讨论了，这篇文章主要讲目前火热的打包构建方式--Webpack的使用方式。

主菜--没有开胃汤

其实Webpack的入门指导文章非常多，配置方式也各有各样，这里我推荐题叶大神的入门级指南--Webpack 入门指迷，如果不知道Webpack是什么或者不是很清楚各项配置含义的开发者，可以看此文章扫扫盲。毕竟我这篇文章并不是特别基础。

一、base.js

 
 
    
  
  
  1. var path = require('path') 
    2. 
  
  
  2. var baseConfig = { 
    3. 
  
  
  3.     resolve: { 
    4. 
  
  
  4.         extensions: ['', '.js'], 
    5. 
  
  
  5.         fallback: [path.join(__dirname, '../node_modules')], 
    6. 
  
  
  6.         alias: { 
    7. 
  
  
  7.             'src': path.resolve(__dirname, '../src'), 
    8. 
  
  
  8.             'assets': path.resolve(__dirname, '../src/assets'), 
    9. 
  
  
  9.             'components': path.resolve(__dirname, '../src/components') 
    10. 
  
  
  10.         } 
    11. 
  
  
  11.     }, 
    12. 
  
  
  12.     module: { 
    13. 
  
  
  13.         loaders: [{ 
    14. 
  
  
  14.             test: /\.js$/, 
    15. 
  
  
  15.             loader: 'babel', 
    16. 
  
  
  16.             exclude: /node_modules/ 
    17. 
  
  
  17.         }, { 
    18. 
  
  
  18.             test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/, 
    19. 
  
  
  19.             loader: 'url?limit=8192&context=client&name=[path][name].[hash:7].[ext]' 
    20. 
  
  
  20.         }, 
    21. 
  
  
  21.         { 
    22. 
  
  
  22.             test: /\.css$/, 
    23. 
  
  
  23.             loader: 'style!css!autoprefixer', 
    24. 
  
  
  24.         }, 
    25. 
  
  
  25.         { 
    26. 
  
  
  26.             test: /\.scss$/, 
    27. 
  
  
  27.             loader: 'style!css!autoprefixer!sass' 
    28. 
  
  
  28.         }] 
    29. 
  
  
  29.     } 
    30. 
  
  
  30. }; 
    31. 
  
  
  31.  
    32. 
  
  
  32. module.exports = baseConfig; 
    33.

解读下这个基本配置：

1、resolve 解析模块依赖的时候，受影响的配置项。

extensions 决定了哪些文件后缀在引用的时候可以省略点，Webpack帮助你补全名称。

fallback 当webpack在 root(默认当前文件夹，配置时要绝对路径) 和 modulesDirectories(默认当前文件夹，相对路径)配置下面找不到相关modules，去哪个文件夹下找modules

alias 这个大家应该比较熟悉，requirejs之类的都有，就是别名，帮助你快速指向文件路径，少写不少代码，而且不用关心层级关系，需要注意的是：在scss之类的css预编译中引用要加上~，以便于让loader识别是别名引用路径。

2、module 解析不同文件使用哪些loader，这个比较简单，很多文章都有，就不多说了，注意的是，这里的scss可以换成你自己的预编译器，例如：sass、less、stylus等，或者直接用postcss都行，当然还可以用一种通用方法，后面补上。

二、开发环境配置--config

 
 
    
  
  
  1. var webpack = require('webpack'); 
    2. 
  
  
  2. var path = require('path') 
    3. 
  
  
  3. var merge = require('webpack-merge') 
    4. 
  
  
  4. var baseConfig = require('./webpack.base') 
    5. 
  
  
  5. var getEntries = require('./getEntries') 
    6. 
  
  
  6.  
    7. 
  
  
  7. var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true'; 
    8. 
  
  
  8.  
    9. 
  
  
  9. var assetsInsert = require('./assetsInsert') 
    10. 
  
  
  10.  
    11. 
  
  
  11. module.exports = merge(baseConfig, { 
    12. 
  
  
  12.   entry: getEntries(hotMiddlewareScript), 
    13. 
  
  
  13.   devtool: '#eval-source-map', 
    14. 
  
  
  14.   output: { 
    15. 
  
  
  15.     filename: './[name].[hash].js', 
    16. 
  
  
  16.     path: path.resolve('./dist'), 
    17. 
  
  
  17.     publicPath:'./dist' 
    18. 
  
  
  18.   }, 
    19. 
  
  
  19.   plugins: [ 
    20. 
  
  
  20.     new webpack.DefinePlugin({ 
    21. 
  
  
  21.       'process.env': { 
    22. 
  
  
  22.         NODE_ENV: '"development"' 
    23. 
  
  
  23.       } 
    24. 
  
  
  24.     }), 
    25. 
  
  
  25.     new webpack.optimize.OccurenceOrderPlugin(), 
    26. 
  
  
  26.     new webpack.HotModuleReplacementPlugin(), 
    27. 
  
  
  27.     new webpack.NoErrorsPlugin(), 
    28. 
  
  
  28.     new assetsInsert() 
    29. 
  
  
  29.   ] 
    30. 
  
  
  30. }) 
    31.

说说这个配置中的一些难点：

1、getEntries 是用来配置入口文件，一般很多人是自己手写，或者SPA页面，只有一个入口， 很容易就写出来，但是公司中，很多情况，是需要多入口，也就是多路由的Url，这个时候入口的配置就比较麻烦，我这里是放单独一个文件里面配置，我们公司是靠规定来执行，也就是一个文件夹所有的main.js都认为是入口文件，其他都忽略。

 
 
    
  
  
  1. function getEntry(hotMiddlewareScript) { 
    2. 
  
  
  2.     var pattern = paths.dev.js + 'project/**/main.js'; 
    3. 
  
  
  3.     var array = glob.sync(pattern); 
    4. 
  
  
  4.     var newObj = {}; 
    5. 
  
  
  5.  
    6. 
  
  
  6.     array.map(function(el){ 
    7. 
  
  
  7.         var reg = new RegExp('project/(.*)/main.js','g'); 
    8. 
  
  
  8.         reg.test(el); 
    9. 
  
  
  9.         if (hotMiddlewareScript) { 
    10. 
  
  
  10.             newObj[RegExp.$1] = [el, hotMiddlewareScript]; 
    11. 
  
  
  11.         } else { 
    12. 
  
  
  12.             newObj[RegExp.$1] = el; 
    13. 
  
  
  13.         } 
    14. 
  
  
  14.     }); 
    15. 
  
  
  15.     return newObj; 
    16. 
  
  
  16. } 
    17.

2、assetsInsert 是用来做模板替换的，一个小插件把template里面的值替换成打包后的css或者js。

三、打包环境配置--production

 
 
    
  
  
  1. var webpack = require('webpack'); 
    2. 
  
  
  2. var path = require('path') 
    3. 
  
  
  3. var merge = require('webpack-merge') 
    4. 
  
  
  4. var baseConfig = require('./webpack.base') 
    5. 
  
  
  5. var getEntries = require('./getEntries') 
    6. 
  
  
  6. var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
    7. 
  
  
  7. var assetsInsert = require('./assetsInsert') 
    8. 
  
  
  8.  
    9. 
  
  
  9. var productionConf = merge(baseConfig, { 
    10. 
  
  
  10.     entry: getEntries(), 
    11. 
  
  
  11.     output: { 
    12. 
  
  
  12.         filename: './[name].[hash].js', 
    13. 
  
  
  13.         path: path.resolve('./public/dist'), 
    14. 
  
  
  14.         publicPath: './' 
    15. 
  
  
  15.     }, 
    16. 
  
  
  16.     plugins: [ 
    17. 
  
  
  17.         new webpack.DefinePlugin({ 
    18. 
  
  
  18.             'process.env': { 
    19. 
  
  
  19.                 NODE_ENV: '"production"' 
    20. 
  
  
  20.             } 
    21. 
  
  
  21.         }), 
    22. 
  
  
  22.         new ExtractTextPlugin('./[name].[hash].css', { 
    23. 
  
  
  23.             allChunks: true 
    24. 
  
  
  24.         }), 
    25. 
  
  
  25.         new webpack.optimize.UglifyJsPlugin({ 
    26. 
  
  
  26.             compress: { 
    27. 
  
  
  27.                 warnings: false 
    28. 
  
  
  28.             } 
    29. 
  
  
  29.         }), 
    30. 
  
  
  30.         new webpack.optimize.OccurenceOrderPlugin(), 
    31. 
  
  
  31.         new assetsInsert() 
    32. 
  
  
  32.     ] 
    33. 
  
  
  33. }) 
    34. 
  
  
  34.  
    35. 
  
  
  35. productionConf.module.loaders = [ 
    36. 
  
  
  36.              { 
    37. 
  
  
  37.                 test: /\.js$/, 
    38. 
  
  
  38.                 loader: 'babel', 
    39. 
  
  
  39.                 exclude: /node_modules/ 
    40. 
  
  
  40.             }, { 
    41. 
  
  
  41.                 test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/, 
    42. 
  
  
  42.                 loader: 'url?limit=8192&context=client&name=[path][name].[hash:7].[ext]' 
    43. 
  
  
  43.             }, 
    44. 
  
  
  44.             { 
    45. 
  
  
  45.                 test: /\.css$/, 
    46. 
  
  
  46.                 loader: ExtractTextPlugin.extract('style', 'css'), 
    47. 
  
  
  47.             }, 
    48. 
  
  
  48.             { 
    49. 
  
  
  49.                 test: /\.scss$/, 
    50. 
  
  
  50.                 loader: ExtractTextPlugin.extract('style', 'css!sass') 
    51. 
  
  
  51.             }] 
    52. 
  
  
  52.  
    53. 
  
  
  53. module.exports = productionConf 
    54.

基本跟开发的差不多，差别在于：

1、使用ExtractTextPlugin 来打包css，所以要干掉原来base的loaders，重新写了一个，在最下面。

2、UglifyJsPlugin 给js压缩代码。其他没有什么好解释的了，一样的。

四、构建命令

 
 
    
  
  
  1. require('shelljs/global') 
    2. 
  
  
  2. env.NODE_ENV = 'production' 
    3. 
  
  
  3. var ora = require('ora') 
    4. 
  
  
  4. var webpack = require('webpack') 
    5. 
  
  
  5. var webpackConfig = require('./webpack.production.config') 
    6. 
  
  
  6.  
    7. 
  
  
  7. var spinner = ora('building for production...') 
    8. 
  
  
  8. spinner.start() 
    9. 
  
  
  9.  
    10. 
  
  
  10. var staticPath = __dirname + '/../public/dist/' 
    11. 
  
  
  11. rm('-rf', staticPath) 
    12. 
  
  
  12. mkdir('-p', staticPath) 
    13. 
  
  
  13.  
    14. 
  
  
  14. webpack(webpackConfig, function (err, stats) { 
    15. 
  
  
  15.   spinner.stop() 
    16. 
  
  
  16.   if (err) throw err 
    17. 
  
  
  17.   process.stdout.write(stats.toString({ 
    18. 
  
  
  18.     colors: true, 
    19. 
  
  
  19.     modules: false, 
    20. 
  
  
  20.     children: false, 
    21. 
  
  
  21.     chunks: false, 
    22. 
  
  
  22.     chunkModules: false 
    23. 
  
  
  23.   }) + '\n') 
    24. 
  
  
  24. }) 
    25.

写一个build.js，然后在package.json里面添加 script 参数 

 
 
    
  
  
  1. "build": "node build.js"//这里记得写自己build.js路径 
    2.

甜点(马卡龙)--有点腻

上面的配置是可以更改的，例如你在loaders 里面加上

 
 
    
  
  
  1. { 
    2. 
  
  
  2.   test: /\.vue$/, 
    3. 
  
  
  3.   loader: 'vue' 
    4. 
  
  
  4. } 
    5.

就可以变成支持.vue文件的vuejs打包构建，同理，修改下支持jsx，和添加一些reactjs的module，就可以用来跑Reactjs的东西。

还有可以随意更改Css预编译器的类型，用你自己喜欢就行，或者跟我们前面提到的方法，把所有类型都配置上，

 
 
    
  
  
  1. var path = require('path') 
    2. 
  
  
  2. var config = require('../config') 
    3. 
  
  
  3. var ExtractTextPlugin = require('extract-text-webpack-plugin') 
    4. 
  
  
  4.  
    5. 
  
  
  5. exports.assetsPath = function (_path) { 
    6. 
  
  
  6.   return path.posix.join(config.build.assetsSubDirectory, _path) 
    7. 
  
  
  7. } 
    8. 
  
  
  8.  
    9. 
  
  
  9. exports.cssLoaders = function (options) { 
    10. 
  
  
  10.   options = options || {} 
    11. 
  
  
  11.   // generate loader string to be used with extract text plugin 
    12. 
  
  
  12.   function generateLoaders (loaders) { 
    13. 
  
  
  13.     var sourceLoader = loaders.map(function (loader) { 
    14. 
  
  
  14.       var extraParamChar 
    15. 
  
  
  15.       if (/\?/.test(loader)) { 
    16. 
  
  
  16.         loader = loader.replace(/\?/, '-loader?') 
    17. 
  
  
  17.         extraParamChar = '&' 
    18. 
  
  
  18.       } else { 
    19. 
  
  
  19.         loader = loader + '-loader' 
    20. 
  
  
  20.         extraParamChar = '?' 
    21. 
  
  
  21.       } 
    22. 
  
  
  22.       return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 
    23. 
  
  
  23.     }).join('!') 
    24. 
  
  
  24.  
    25. 
  
  
  25.     if (options.extract) { 
    26. 
  
  
  26.       return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 
    27. 
  
  
  27.     } else { 
    28. 
  
  
  28.       return ['vue-style-loader', sourceLoader].join('!') 
    29. 
  
  
  29.     } 
    30. 
  
  
  30.   } 
    31. 
  
  
  31.  
    32. 
  
  
  32.   // http://vuejs.github.io/vue-loader/configurations/extract-css.html 
    33. 
  
  
  33.   return { 
    34. 
  
  
  34.     css: generateLoaders(['css']), 
    35. 
  
  
  35.     postcss: generateLoaders(['css']), 
    36. 
  
  
  36.     less: generateLoaders(['css', 'less']), 
    37. 
  
  
  37.     sass: generateLoaders(['css', 'sass?indentedSyntax']), 
    38. 
  
  
  38.     scss: generateLoaders(['css', 'sass']), 
    39. 
  
  
  39.     stylus: generateLoaders(['css', 'stylus']), 
    40. 
  
  
  40.     styl: generateLoaders(['css', 'stylus']) 
    41. 
  
  
  41.   } 
    42. 
  
  
  42. } 
    43. 
  
  
  43.  
    44. 
  
  
  44. // Generate loaders for standalone style files (outside of .vue) 
    45. 
  
  
  45. exports.styleLoaders = function (options) { 
    46. 
  
  
  46.   var output = [] 
    47. 
  
  
  47.   var loaders = exports.cssLoaders(options) 
    48. 
  
  
  48.   for (var extension in loaders) { 
    49. 
  
  
  49.     var loader = loaders[extension] 
    50. 
  
  
  50.     output.push({ 
    51. 
  
  
  51.       test: new RegExp('\\.' + extension + '$'), 
    52. 
  
  
  52.       loader: loader 
    53. 
  
  
  53.     }) 
    54. 
  
  
  54.   } 
    55. 
  
  
  55.   return output 
    56. 
  
  
  56. } 
    57.

这就是把所有的css预编译的都加到配置里面了。

总结下--买单啦

Webpack多种多样，就算一个loaders都有好几种不同的配置，让人很是头疼，最关键的是很多插件自己的文档也不清不楚，弄得大家都很迷茫，我的经验就是多试多测，自己多写一写，看命令行打印的错误，去找原因，不要一看到报错就慌了，很多新手最容易犯错就是一看到报错就怀疑人生了，一定要看报错记录，一般都有提示，按照提示去解决相应问题就好啦。

网页标题：如何打造一个令人愉悦的前端开发环境（二）
分享地址：http://www.shufengxianlan.com/qtweb/news0/310250.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

定制开发知识

分类信息网

光华村机房　　 　成都网站建设　　 　达州博佩科技　　 　网站seo优化　　 　广安园林绿化公司　　 　深圳纱窗安装　　 　营销网站建设　　 　旅游网站建设方案　　 　成都网站建设公司　　 　成都移动服务器托管　　 　企业网站设计　　 　服务器托管　　 　成都网站推广营销　　 　香港空间腾讯云　　 　成都棕树机房　　 　堡垒主机　　 　都江堰做网站　　 　成都网站建设　　 　成都广告公司　　 　成都做手机网站