闲来无事,学习一下怎么用 webpack 自定义多入口项目的打包

项目github地址:https://github.com/xiaoliwang2016/webpack-demo

先来看一下目录结构

/admin、/home:模块,可以根据需求分,也可以只需要一个模块

/htmlConfig:因为是多入口项目,因此需要一个配置文件来记录多个入口的路径,以及与模块之间的层级关系,单入口文件仅需要定义一个入口,webpack会自动追踪依赖关系,多入口需要定义多个,所以单独存起来会好一些

/webpack.config.js:webpack配置默认文件,可以根据在开发环境和生成坏境分开

/模块/html:放置页面文件

/模块/html/tpl:放置一些公用的模板

/模块/js:放置对应的js文件,名称与html页面一致

/模块/css:放置样式文件

然后来看一下打包后的目录

js文件统一放置在/dist/js目录,页面文件放在各自模块名称对应的目录下

看完最终效果我们来看一下webpack配置项


入口配置文件

首先看一下前面提到的 htmlConfig.js 文件

module.exports = {
'admin' : [
'index',
'login'
],
'home' : [
'index'
]
}

很简单,就是记录了各个模块下的页面的名称,然后在webpack.config.js中拿去到这个配置项,遍历打包这些页面

webpack配置文件

webpack会默认读取根目录下webpack.config.js文件,通常可以将这个文件拆分成dev和pro,这里用作演示,没有分开

const path = require('path')
const htmlConfig = require('./htmlConfig.js')
//生成html插件
const htmlWebpackPlugin = require('html-webpack-plugin')
//抽离css插件
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); var htmlWebpackPlugins = []
var entrys = {} for(var key in htmlConfig){
htmlConfig[key].forEach(item => {
//生成 entry 对象中的 key 例如 { admin-login: './admin/login.html' }
var k = key + '-' + item htmlWebpackPlugins.push(new htmlWebpackPlugin({
//template设置根据那个模板生成
template: `./src/${key}/html/${item}.html`,
//生成html名称
filename: `./${key}/${item}.html`,
//chunks 设置需要引入的JS模块
chunks: [k],
//自动引入js 可选:true(底部)/body/head
inject: true,
})) entrys[k] = `./src/${key}/js/${item}.js`
})
} module.exports = {
mode: 'production',
entry: entrys,
output: {
path: path.resolve(__dirname, 'dist'),
// name:对应entry的key ,chunkhash根据文件进行MD5自动计算
filename: 'js/[name]-[chunkhash].js',
//上线时可以使用 publicPath替换根路径
// publicPath: 'http://cdn.com/'
},
module:{
rules: [
{
test: /\.js$/,
//排除项
exclude: path.resolve(__dirname, 'node_modules'),
//选择项
include: path.resolve(__dirname, 'src'),
loader: "babel-loader",
//babel需要配合 babel-preset-env 一起使用
query: {
"presets": ["env"]
}
},
{
test: /\.css$/,
//同一个文件需要多个loader的情况下可以使用数组,执行顺序根据数组从后往前执行
use: [
//使用MiniCssExtractPlugin.loader代替style-loader抽离css成单独文件
MiniCssExtractPlugin.loader,
// 'style-loader',
//每个loader可以有自己的参数,options字段就是定义参数
{ loader: 'css-loader', options: {importLoaders: 1}},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
//autoprefixer是postcss-loader的一个插件,需要安装,用于给css添加前缀
plugins: [
require('autoprefixer')({
cascade: false
})
]
}
}
]
},
{
test: /\.tpl$/,
loader: 'ejs-loader'
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].css",
chunkFilename: "[id].css"
}),
...htmlWebpackPlugins
]
}

注意:这里需要注意的是使用 loader 打包文件时调用 loader 的顺序时根据数组从后往前,因此这里处理css文件的顺序时:

postcss-loader --> css-loader --> style-loader

* postcss-loader是一个css后处理器,他提供很多插件可以处理css文件,例如css自动添加前缀,压缩等等

loader

js

webpack默认只会处理js文件,因此如果有需要处理不同文件时需要指定对应的loader

例如常用转换js语法的loader:babel-loader

安装:

npm install babel-loader --save-dev
npm install babel-preset-env --save-dev

然后需要在制定位置添加 presets 配置项

可以是 padkjson.js 或者 .babelrc 文件 或者webpack.config.js中

模板

多入口文件一般一个页面对应一个js文件,可以在js文件中再次引入其他的模板(页面),在通过loader解析最后插入到当前页面

例如这里的/admin/js/index.js对应的模板时/admin/html/index.html,然而还可以在index.js中引入一些其他的模板,例如引入admin/html/tpl/table.tpl,然后渲染插入到index.html中

在处理模板文件时可以根据不同的模板设置不同的loader处理,这里演示的是ejs的模板

<table class="table">
<tr>
<th>brand</th>
<th>name</th>
<th>price</th>
</tr>
<% for(var i = 0; i < data.length; i++) { %>
<tr>
<td><%= data[i].brand %></td>
<td><%= data[i].name %></td>
<td><%= data[i].price %></td>
</tr>
<% } %>
</table>

在webpack.config.js中配置loader

{
test: /\.tpl$/,
loader: 'ejs-loader'
}

在js文件中可以直接通过import的放置引入该模板文件

import table from '../html/layer/table.tpl'

ejs-loader处理完成后会返回一个函数(html-loader返回为字符串),函数的参数为模板的变量,例如在admin/js/index.js文件中引入模板然后插入到页面

import '../css/index.css'
import table from '../html/layer/table.tpl' document.querySelector('#table').innerHTML = table({
data : [
{brand: 'MI', name: 'MI6', price: 2999},
{brand: 'iphone', name: 'iphoneX', price: 9999}
]
})

生成后页面

样式

可以在js中直接通过import的方式引入

import '../css/index.css'

也可以在css中引入其他的css文件

@import './common.css';

css文件中分号一定要带上

使用 webpack 搭建多入口项目的更多相关文章

  1. 一步步从零开始用 webpack 搭建一个大型项目

    开篇 很多人都或多或少使用过 webpack,但是很少有人能够系统的学习 webpack 配置,遇到错误的时候就会一脸懵,不知道从哪查起?性能优化时也不知道能做什么,网上的优化教程是不是符合自己的项目 ...

  2. webpack搭建自己的项目

    使用代理的方式参考地址:http://www.cnblogs.com/wangyongcun/p/7665687.html npm 常用模块 npm init 创建package.json文件 一值回 ...

  3. 在webpack搭建的vue项目中如何管理好后台接口地址

    在最近做的vue项目中,使用了webpack打包工具,以前在做项目中测试环境和生产环境的接口地址都是一样的,由于现在接口地址不一样,需要在项目打包的时候手动切换不同的地址,有时候忘记切换就要重新打包, ...

  4. 从零开始搭建一个react项目

    Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...

  5. 使用 webpack 搭建 React 项目

    简评:相信很多开发者在入门 react 的时候都是使用 create-react-app 或 react-slingshot 这些脚手架来快速创建应用,当有特殊需求,需要修改 eject 出来的 we ...

  6. vue-cli+ webpack 搭建项目todolist

    本文接着之前的todolist例子,通过vue-cli + webpack 搭建项目:针对于vue-cli 2.x版本,更高版本找官网https://cli.vuejs.org/guide/insta ...

  7. 使用webpack搭建react项目 webpack-react-project

    webpack-react-project 使用webpack搭建react项目 webpack搭建react项目 github源码 具体配置信息参照package.json和webpack.conf ...

  8. webpack搭建vue项目开发环境【文档向学习】

    为何有这篇文章 各个社区已经有无数篇帖子介绍如何使用webpack搭建前端项目,但无论是出于学习webpack的目的还是为了解决工作实际需要都面临着一个现实问题,那就是版本更新.别人的帖子可能刚写好版 ...

  9. 使用webpack从0搭建多入口网站脚手架,可复用导航栏/底部通栏/侧边栏,根据页面文件自动更改配置,支持ES6/Less

    之前只知道webpack很强大,但是一直没有深入学习过,这次从头看了一下教程,然后从0开始搭建了一个多入口网站的开发脚手架,期间遇到过很多问题,所以有心整理一下,希望能给大家一点帮助. 多HTML网站 ...

随机推荐

  1. Windows环境下C++中关于文件结束符的问题

    参考资料:http://www.cnblogs.com/day-dayup/p/3572374.html 一.前言 在不同的OS环境下,程序中对应的文件结束符有所不一样,根据<C++ Prime ...

  2. 引擎设计跟踪(九.14.3.1) deferred shading: Depthstencil as GBuffer depth

    问题汇总 1.Light support for Editor编辑器加入了灯光工具, 可以添加和修改灯光. 问题1. light object的用户互交.point light可以把对应的volume ...

  3. Jquery的动态切换图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. CentOS6/7快捷使用gcc5

    Centos6/7自带的gcc为4.x版本,可通过devtoolset工具集安装gcc5.x版本 1. 添加yum源 1)CentOS6 [hhorak-devtoolset--rebuild-boo ...

  5. lua 匹配空白符

    lua 支持的所有字符类: .     任意字符%s 空白符 空白字符一般包括空格.换行符\n.制表符\t以及回到行首符\r%p 标点字符%c 控制字符%d 数字%x 十六进制数字%z 代表0的字符% ...

  6. QCAD 修改默认的线宽

    QCAD 修改默认的线宽 默认的宽度实在是太宽了,把一些细节给掩盖了. 可以按以下方法找到修改默认宽度. 在 Layer -> Edit Layer 中. 最开始找了好久好久. 最开始在这里找了 ...

  7. 剑指offer 4.树 重建二叉树

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...

  8. python安装media报错

    Try https://pypi.python.org/pypi/setuptools easy_install LEE 我后来,依次在Python2.7中装了 numpy-1.7.0-win32-s ...

  9. php7带来的性能升级

    前言本文是一篇讲座听后+后续研究的总结. 话说当年追时髦,php7一出就给电脑立马装上了,php5和php7共存,也是立马写了个超级耗时间的循环脚本测了一番,确实php7给力很多,然后也是注意了一些新 ...

  10. WPF设计界面不执行代码

    一般在我们在设计WPF XAML界面时,XAML 引用一些后端的类.比如UserControl.Converter.MVVM,引用 xmlns:ALLUserControl="clr-nam ...