前后端分离之vue2.0+webpack2 实战项目 -- webpack介绍

var bar  = require('./bar')

  |__ html
        |__ dist
              |__ income.html
              |__ index.html
        |__ src
              |__ income
                |__ income.ejs
                |__ income.js
              |__ index
                |__ index.ejs
                |__ index.js
              |__ layouts
                |__ footer.ejs
                |__ header.ejs
                |__ layout.ejs
                |__ layout.js
                |__ side-menu.e
                |__ top-nav.ejs
  |__ dist
        |__ css
        |__ img
        |__ js
              |__ income.js
              |__ index.js
              |__ manifest.js
              |__ vendors.js
  |__ src
        |__ css
        |__ img
        |__ js
              |__ component
                |__ App.vue
              |__ income.js
              |__ index.js
              |__ lib
                |__ axios.min.js
                |__ layer.js
                |__ vue.js
                |__ vue.min.js
  |__ mock
  |__ node_modules
  |__ webpack-config
        |__ .eslintrc.dev.js
        |__ .eslintrc.js
        |__ postcss.config.js
        |__ resolve.config.js
  |__ package.json
  |__ .babelrc
  |__ .eslintrc.js

var entries = getEntry('./src/**/*.js') // 获得入口js文件
entries.vendors = ['vue','axios']

module.exports = {
     /* 输入文件 */
    entry: entries
}

entries 为：

{ 
  income: './src/js/income.js',
  index: './src/js/index.js',
  vendors: [ 'vue', 'axios' ] 
}

var path = require('path')

module.exports = {
  // 模块别名的配置，为了使用方便，一般来说所有模块都是要配置一下别名的
  alias: {
    'vue': path.resolve(__dirname, '../src/js/lib/vue.min.js'),
    'axios': path.resolve(__dirname, '../src/js/lib/axios.min.js')
  }
}

_dirname: d:\demo

path.resolve(__dirname, '../src/js/lib/vue.min.js'): d:\demo\src\js\lib\vue.min.js

/***** 获取文件列表：输出正确的js和html路径 *****/
var glob = require('glob')

function getEntry(globPath) {
    var entries = {}, basename

    glob.sync(globPath).forEach(function (entry) {
    //排出layouts内的公共文件
        if(entry.indexOf('layouts') == -1 && entry.indexOf('lib') == -1){
            basename = path.basename(entry, path.extname(entry))
            entries[basename] = entry
        }
    })
    return entries
}

module.exports = {
    output: {
        /* 输出目录，没有则新建 */
        path: path.resolve(__dirname, './dist'),
        /* 静态目录，可以直接从这里取文件 */
        publicPath: 'http://www.xxx.com/dist/',
        /* 文件名 */
        filename: 'js/[name].js?v=[chunkhash:8]'
    }
}

特别注意：webpack v1 和webpack v2 的区别
 
 module: {
-   loaders: [
+   rules: [
      {
        test: /\.css$/,
-       loaders: [
-         "style-loader",
-         "css-loader?modules=true"
+       use: [
+         {
+           loader: "style-loader"
+         },
+         {
+           loader: "css-loader",
+           options: {
+             modules: true
+           }
+         }
        ]
      },
      {
        test: /\.jsx$/,
        loader: "babel-loader", // Do not use "use" here
        options: {
          // ...
        }
      }
    ]
  }

module: {
    rules: [
           {
                test: /\.js$/,
                enforce: 'pre',
                loader: 'eslint-loader',
                include: path.resolve(__dirname, './src/js/**/*.js'),
                exclude: ['./src/js/lib','./src/js/component'],
                options: {
                    fix: true
                }
            }  
    ]          
}    

{
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: ['node_modules','./src/js/lib','./src/js/component']
}

{   
    test: /\.css$/, 
    use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
    test: /\.less$/,
    use: ExtractTextPlugin.extract(['css-loader','postcss-loader','less-loader'])
}

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

module: {},
plugins: [
        new ExtractTextPlugin('css/[name].css?v=[contenthash:6]'),
        new webpack.LoaderOptionsPlugin({
            options: {
                eslint: require( './webpack-config/.eslintrc.js'),
                postcss: require( './webpack-config/postcss.config.js')
            },
        })
    ]

module.exports.plugins.push(new htmlWebpackPlugin())

module.exports.plugins = module.exports.plugins.concat([
        //压缩css代码
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: {removeAll: true } },
            canPrint: true
        }),
        //压缩JS代码
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false, // 去掉注释内容
            }
        })
    ])

new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css/g,  //注意不要写成 /\.css$/g, 否则匹配不到css文件会导致压缩不成功
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { discardComments: {removeAll: true } },
            canPrint: true
        })

var BrowserSyncPlugin = require('browser-sync-webpack-plugin')

module.exports = {
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 3000,
            server: { baseDir: ['./'] }
        })
    ]
}

// 提取公共模块
new webpack.optimize.CommonsChunkPlugin({
    names:  ['vendors', 'manifest'], // 公共模块的名称
    //filename: 'js/[name]-[chunkhash:6].js', // 公共模块的名称
    chunks: 'vendors',  // chunks是需要提取的模块
    minChunks: Infinity  //公共模块最小被引用的次数
})

To extract the webpack bootstrap logic into a separate file, use the CommonsChunkPlugin on a name which is not defined as entry. Commonly the name manifest is used. See the code splitting libraries guide for details.

new CleanWebpackPlugin(['dist'])