Webpack 配置详情 - Githubissues

wuye1200 commented 6 years ago

配置

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './entry.js', //入口文件 可配置多入口
  output: {
    path: __dirname,//出口路径
    filename: 'js/[id]-[name]-[hash].js'//出口名称
  },
  //webpack插件
  plugins: [
    new HtmlWebpackPlugin({
      inject:'head',//将script标签插入到head标签中
      filename: 'index-[hash].html',//生成的html文件名称为'index.html'
    })
  ]
}

wuye1200 commented 6 years ago

entry

//方式一：单文件写法
entry: {
    index: './src/pages/route.js',
    //about: './src/pages/about.js',
    //other:()=>{...}
}

//方式二：多文件写法
entry: {
    /*index:[
        'webpack-hot-middleware/client',
        './src/root.js'
    ],*/
    index: ['./src/root.js'],
    vendors : ['react','react-dom','redux','react-router','classnames'],
}

output - 输出

它位于对象最顶级键(非常重要)，如果说entry是一扇门，output就是审判官，决定着你是上天堂还是入地狱；
指示 webpack 如何去输出、以及在哪里输出、输出的格式等；
path: 输出文件的目录，
filename:输出的文件名，它一般跟你entry配置相对应，如：js/[name].js name在这里表示的是[index、vendors]，
chunkFilename：块，配置了它，非入口entry的模块，会帮自动拆分文件，也就是大家常说的按需加载，与路由中的 require.ensure相互应
publicPath：文件输出的公共路径，
pathinfo：即保留相互依赖的包中的注释信息，这个基本不用主动设置它，它默认 development 模式时的默认值是 true，而在 production 模式时的默认值是 false，
主要的就是这些，还有一些其他的library、libraryTarget、auxiliaryComment等,感兴趣的可自行了解，

output: {
    path: path.resolve(__dirname, '../assets'),
    filename: 'js/[name].js',
    chunkFilename: 'js/[name].[chunkhash:8].js',
    publicPath: '/_static_/', //最终访问的路径就是：localhost:3000/_static_/js/*.js
    //pathinfo:true,
}

wuye1200 commented 5 years ago

[插件] 可视化查询文件分布
webpack-bundle-analyzer

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [
    new BundleAnalyzerPlugin()
]

[插件] 压缩

new HtmlWebpackPlugin({
      minify:{
          removeComments: true,//删除注释
          collapseWhitespace:true//删除空格
      }
})

[插件] 模板文件

new HtmlWebpackPlugin({
      filename: 'index-[hash].html',//生成的html文件名称为'index.html'
      template:'template/template.html'//模板文件为'template.html'
})

wuye1200 commented 5 years ago

【多页入口改造】

var glob = require('glob')
//目录输出
  function getEntry(globPath, pathDir) {
    var files = glob.sync(globPath);
    var entries = {},
      entry, dirname, basename, pathname, extname;

    for (var i = 0; i < files.length; i++) {
      entry = files[i];
      dirname = path.dirname(entry);
      extname = path.extname(entry);
      basename = path.basename(entry, extname);
      pathname = path.join(dirname, basename);
      pathname = pathDir ? pathname.replace(pathDir, '') : pathname;
      console.log(2, pathname, entry);
      entries[pathname] = './' + entry;
    }
    return entries;
  }

var htmls = getEntry('./src/app/*.js', 'src\\app\\');

var entryObj = {};
var entryPlugin = [];
var entryObjIndex =0
for (var key in htmls) {

  entryPlugin.push([
    require.resolve('./polyfills'),
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appSrc + '\\app\\'+key+'.js',
  ])

  entryObj[key] = entryPlugin[entryObjIndex]
  entryObjIndex++
}

【插件多入口】
for (var key in htmls) {
  var neeplugin = new HtmlWebpackPlugin({
      inject: true,
      chunks:[''+key+''],
      template:paths.appHtml,
      filename:''+key+'.html'
  })

  console.log( 444)
  console.log( neeplugin)
  module.exports.plugins.push(neeplugin)
}

wuye1200 / blog

Webpack 配置详情 #5

配置

entry

output - 输出