webpack 實現的多入口項目腳手架

簡介

基於 webpack2 實現的多入口項目腳手架，主要使用 extract-text-webpack-plugin 實現 js 、css 公共代碼提取，html-webpack-plugin 實現 html 多入口，less-loader 實現 less 編譯，postcss-loader 配置 autoprefixer 實現自動添加瀏覽器兼容前綴，html-withimg-loader 實現 html 內引入圖片版本號添加和模板功能，babel-loader 實現 ES6 轉碼功能， happypack 多線程加速構建速度。

├── dist # 構建後的目錄
├── config # 項目配置文件
│ ├── webpack.config.js # webpack 配置文件
│ └── postcss.config.js # postcss 配置文件
├── src # 程序源文件
│ └── js # 入口
│ ├ └── index.js # 匹配 view/index.html
│ ├ └── user
│ ├ ├ ├── index.js # 匹配 view/user/index.html
│ ├ ├ ├── list.js # 匹配 view/user/list.html
│ ├ └── lib # JS 庫等，不參與路由匹配
│ ├ ├── jquery.js
│ └── view
│ ├ └── index.html # 對應 js/index.js
│ ├ └── user
│ ├ ├── index.html # 對應 js/user/index.js
│ ├ ├── list.html # 對應 js/user/list.js
│ └── css # css 文件目錄
│ ├ └── base.css
│ ├ └── iconfont.css
│ └── font # iconfont 文件目錄
│ ├ └── iconfont.ttf
│ ├ └── iconfont.css
│ └── img # 圖片文件目錄
│ ├ └── pic1.jpg
│ ├ └── pic2.png
│ └── template # html 模板目錄
│ └── head.html
│ └── foot.html

配置多入口

根據 JS目錄獲取多入口數組

const ROOT = process.cwd; // 根目錄

// webpack 配置
const config = {
entry: entryJs,
output: {
filename: "js/[name].js?[chunkhash:8]",
chunkFilename: "js/[name].js?[chunkhash:8]",
path: path.resolve(ROOT, "dist"),
publicPath: "/"
},
}

module

使用 babel 實現 ES2015 轉 ES5，less 轉 css 並使用 postcss 實現 autoprefixer 自動添加瀏覽器兼容，url-loader 實現 css 引用圖片、字體添加版本號，html-withimg-loader 實現 html 引用圖片添加版本號並實現模板功能。

module: {
rules: [
{
test: /.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader?id=js",
options: {
presets: ["env"]
}
}
},
{
test: /.(less|css)$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader?id=styles",
use: [{
loader: "css-loader?id=styles",
options: {
minimize: !IsDev
}
},
{
loader: "less-loader?id=styles"
},
{
loader: "postcss-loader?id=styles",
options: {
config: {
path: PostcssConfigPath
}
}
}
]
})
},
{
test: /.(png|jpg|gif)$/,
use: [
{
loader: "url-loader",
options: {
limit: 100,
publicPath: "",
name: "/img/[name].[ext]?[hash:8]"
}
}
]
},
{
test: /.(eot|svg|ttf|woff)$/,
use: [
{
loader: "url-loader",
options: {
limit: 100,
publicPath: "",
name: "/font/[name].[ext]?[hash:8]"
}
}
]
},
// @see https://github.com/wzsxyz/html-withimg-loader
{
test: /.(htm|html)$/i,
loader: "html-withimg-loader?min=false"
}
]
},

// postcss.config.js
module.exports = {
plugins: [
require("autoprefixer")({
browsers: ["> 1%", "last 5 versions", "not ie <= 9"], }) ] }

View 視圖

根據目錄對應關係，獲取 js 對應的 html 入口

let entryHtml = getEntryHtml("./src/view/**/*.html"),
configPlugins;

});
return entries;
}

plugins

使用 happypack 多線程加快構建速度，CommonsChunkPlugin 實現提取公用 js 為單獨文件，extract-text-webpack-plugin 實現提取公用 css 為單獨文件，

let configPlugins = [
new HappyPack({
id: "js",
// @see https://github.com/amireh/happypack
threadPool: HappyThreadPool,
loaders: ["babel-loader"]
}),
new HappyPack({
id: "styles",
threadPool: HappyThreadPool,
loaders: ["style-loader", "css-loader", "less-loader", "postcss-loader"]
}),
new webpack.optimize.CommonsChunkPlugin({
name: "common"
}),
// @see https://github.com/webpack/webpack/tree/master/examples/multiple-entry-points-commons-chunk-css-bundle
new ExtractTextPlugin({
filename: "css/[name].css?[contenthash:8]",
allChunks: true
})
];

// webpack 配置
plugins: configPlugins,

開發

webpack-dev-server 實現開發環境自動刷新等功能

// webpack 配置
devServer: {
contentBase: [
path.join(ROOT, "src/")
],
hot: false,
host: "0.0.0.0",
port: 8080
}

開發

npm start

構建

cross-env 實現區分開發和生產環境構建

歡迎 star

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！