webpack打包多页面的方法

/**
 * 创建打包路径
 */
const createFiles = function() {
 const usePug = require('../config').usePug;
 const useTypeScript = require('../config').useTypeScript;
 const path = require('path');
 const glob = require('glob');
 const result = [];
 const type = usePug "htmlcode">

const plugins = function() {
 const files = createFiles();
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const path = require('path');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');

 let htmlPlugins = [];
 let Entries = {};
 files.map(file => {
  htmlPlugins.push(
   new HtmlWebpackPlugin({
    filename: `${file.name}.html`,
    template: file.templatePath,
    chunks: [file.name]
   })
  );
  Entries[file.name] = file.jsPath;
 });

 return {
  plugins: [
   ...htmlPlugins,
   new ExtractTextPlugin({
    filename: getPath => {
     return getPath('css/[name].css');
    }
   })
  ],
  Entries
 };
};


由于我使用了ExtractTextPlugin，因此这些CSS代码最终都会生成到所属chunk的目录里成为一个CSS文件。
模版引擎
每个页面相同的UI布局好难维护，UI稍微改一点就要到每个页面去改，好麻烦还容易漏，怎么破？
考虑到这个问题，项目引进并使用了pug模版引擎。
现在，我们可以利用pug的特性，创建一个共用组件：

demo.pug
p 这是一个共用组件

然后，当你需要使用这个公用组件时可以引入进来：


include 'demo.pug'


除此之外，你还可以使用一切pug特供的特性。
webpack中配置pug也很简单，先安装：


npm i --save-dev pug pug-html-loader


然后将所有.html后缀的改为.pug后缀，并且使用pug语法。
然后在规则中再增加一条配置


{
  test: /\.pug$/,
  use: 'pug-html-loader'
}


同时把plugins对象中的用到index.html的HtmlWebpackPlugin中的template，也要改成index.pug。
webpack整合eslint
先放出配置代码:


if (useEslint) {
 loaders.push({
  test: /\.js$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [path.resolve(__dirname, 'src')],
  options: {
   formatter: require('stylish')
  }
 });
}


通过webpack整合ESLint，我们可以保证编译生成的代码都是没有语法错误且符合编码规范的；但在开发过程中，等到编译的时候才察觉到问题可能也是太慢了点儿。
因此我建议可以把ESLint整合进编辑器或IDE里，像我本人在用vs code，就可以使用一个名为Eslint的插件，一写了有问题的代码，就马上会标识出来。
dev环境与prod环境
首先，阅读webpacl项目的时候通常要先看package.json这个文件。因为当你在命令行敲下一句命令


npm run dev


webpack就会找到package.json文件中的script属性并依次分析命令,可见,这句命令相应的会执行
复制代码 代码如下:nodemon --watch build/ --exec \"cross-env NODE_ENV=development webpack-dev-server --color --progress --config build/webpack.dev.js\"
同样的，当写下命令


npm run build


script就会执行


ross-env NODE_ENV=production webpack --config build/webpack.prod.js


这样就能区分开发环境，或是生产环境了。
虽然我们会为环境做区分,但是基于不重复原则,项目为两个环境公用的配置整合到了(build/webpack.base.js)文件中。然后利用webpack-merge插件将配置整合在一起
webpack中使用jquery
在webpack中使用jquery也很简单，我们可以在loaders中增加一条配置：


if (useJquery) {
 loaders.push({
  // 通过require('jquery')来引入
  test: require.resolve('jquery'),
  use: [
   {
    loader: 'expose-loader',
    // 暴露出去的全局变量的名称 随便你自定义
    options: 'jQuery'
   },
   {
    // 同上
    loader: 'expose-loader',
    options: '$'
   }
  ]
 });
}


然后当你需要在某个js文件使用jq时，引用暴露出来的变量名即可：


import $ from 'jQuery';


webpack中使用typescript
在webpack中使用jquery也很简单，我们可以在loaders中增加一条配置：


if (useTs) {
 loaders.push({
  test: /\.tsx?$/,
  use: 'ts-loader',
  exclude: /node_modules/
 });
}


然后将js文件改为ts即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。