媒介
一最先打仗webpack是因为运用Vue的关联，因为Vue的脚手架就是运用webpack构建的。刚最先的时刻以为webpack就是为了打包单页面而生的，厥后想一想，这么好的打包计划，只在单页面上运用是不是太浪费资源了呢？假如能在传统多页面上运用webpack，最先效力是不是会事半功倍呢？幸亏浩瀚优异的前端开辟者已写了很多demo和文章供人进修。我也写了一个小项目，愿望对人人进修webpack有协助。
好吧实在上面说的都是空话，接下来附上项目地点和干货，合营食用更佳。
项目处理的题目
- SPA好庞杂，我照样喜好传统的多页运用怎样破？又或是，我司项目须要后端衬着，页面模板怎样出？
- 每一个页面雷同的UI规划好难保护，UI轻微改一点就要到每一个页面去改，好麻烦还轻易漏，怎样破？
- 能不能整合进ESLint来搜检语法？
- 能不能整合postcss来增强浏览器兼容性？
- 我能够运用在webpack中运用jquery吗？
- 我能够运用在webpack中运用typescript吗？
src目次对应dist目次
当我们运用webpack打包多页面，我们愿望src目次对应打包后dist目次是如上图如许的，开辟依据页面模块的思绪搭建开辟架构，然后经由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 ? 'pug' : 'html';
const scriptType = useTypeScript ? 'ts' : 'js';
const files = glob.sync(path.join(__dirname, `../src/views/**/*.${type}`));
for (file of files) {
result.push({
name: usePug ? file.match(/\w{0,}(?=\.pug)/)[0] : file.match(/\w{0,}(?=\.html)/)[0],
templatePath: file,
jsPath: file.replace(type, scriptType),
stylePath: file.replace(type, 'stylus')
});
}
return result;
};应用这个要领，我们能够取得须要打包的文件途径(要领中猎取文件途径的模块也可运用fs模块)，依据取得打包的文件途径，我们能够运用html-webpack-plugin来完成多页面打包。
因为每一个html-webpack-plugin的对象实例都只针对/天生一个页面，因而，我们做多页运用的话，就要设置多个html-webpack-plugin的对象实例：
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 devwebpack就会找到package.json文件中的script属性并顺次剖析敕令,可见,这句敕令响应的会实行
nodemon --watch build/ --exec \"cross-env NODE_ENV=development webpack-dev-server --color --progress --config build/webpack.dev.js\"一样的，当写下敕令
npm run buildscript就会实行
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即可。
后话
迎接人人提pr，一同构建。
