Heim > Artikel > Web-Frontend > Von Webpack implementiertes Projektgerüst mit mehreren Einträgen
Von Webpack implementiertes Projektgerüst mit mehreren Einträgen
- 巴扎黑Original
- 2017-06-27 09:06:141620Durchsuche
Einführung
Ein Multi-Entry-Projektgerüst basierend auf Webpack2, das hauptsächlich Extract-Text-Webpack-Plugin verwendet, um die Extraktion von öffentlichem JS- und CSS-Code zu implementieren, HTML-Webpack-Plugin, um HTML-Multi-Entry zu implementieren, und less-loader, um weniger Kompilierungen zu implementieren, postcss-loader konfiguriert den Autoprefixer, um automatisch browserkompatible Präfixe hinzuzufügen, html-withimg-loader implementiert das Hinzufügen von Bildversionsnummern und Vorlagenfunktionen in HTML, babel-loader implementiert die ES6-Transkodierungsfunktion und happypack multi- Das Einfädeln beschleunigt die Baugeschwindigkeit.
Verzeichnis
├── 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
Konfiguration
Mehrfacheintrag
Array mit mehreren Einträgen gemäß
JSVerzeichnis abrufen
const ROOT = process.cwd(); // 根目录
let entryJs = getEntry('./src/js/**/*.js');
/**
* 根据目录获取入口
* @param {[type]} globPath [description]
* @return {[type]} [description]
*/
function getEntry (globPath) {
let entries = {};
Glob.sync(globPath).forEach(function (entry) {
let basename = path.basename(entry, path.extname(entry)),
pathname = path.dirname(entry);
// js/lib/*.js 不作为入口
if (!entry.match(/\/js\/lib\//)) {
entries[pathname.split('/').splice(3).join('/') + '/' + basename] = pathname + '/' + basename;
}
});
return entries;
}
// webpack 配置
const config = {
entry: entryJs,
output: {
filename: 'js/[name].js?[chunkhash:8]',
chunkFilename: 'js/[name].js?[chunkhash:8]',
path: path.resolve(ROOT, 'dist'),
publicPath: '/'
},
}
Modul
Verwenden Sie babel, um ES2015 in ES5 zu konvertieren, less in CSS und verwenden Sie postcss, um Autoprefixer zu implementieren, um automatisch Browserkompatibilität hinzuzufügen, URL-Loader, um CSS zu implementieren, um Bilder zu referenzieren und Schriftarten und fügen Versionsnummern hinzu, html -withimg-loader implementiert HTML-Referenzbilder, fügt Versionsnummern hinzu und implementiert Vorlagenfunktionen.
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
{
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'],
})
]
}
Ansicht anzeigen
Besorgen Sie sich gemäß der Verzeichniskorrespondenz den HTML-Eintrag, der js entspricht
let entryHtml = getEntryHtml('./src/view/**/*.html'),
configPlugins;
entryHtml.forEach(function (v) {
configPlugins.push(new HtmlWebpackPlugin(v));
});
// webpack 配置
resolve: {
alias: {
views: path.resolve(ROOT, './src/view')
}
},
/**
* 根据目录获取 Html 入口
* @param {[type]} globPath [description]
* @return {[type]} [description]
*/
function getEntryHtml (globPath) {
let entries = [];
Glob.sync(globPath).forEach(function (entry) {
let basename = path.basename(entry, path.extname(entry)),
pathname = path.dirname(entry),
// @see
minifyConfig = IsDev ? '' : {
removeComments: true,
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true
};
entries.push({
filename: entry.split('/').splice(2).join('/'),
template: entry,
chunks: ['common', pathname.split('/').splice(3).join('/') + '/' + basename],
minify: minifyConfig
});
});
return entries;
}
Plugins
Verwenden Sie Happypack-Multithreading, um den Build zu beschleunigen, CommonsChunkPlugin extrahiert öffentliches JS in separate Dateien, extract-text-webpack-plugin extrahiert öffentliches CSS in separate Dateien,
let configPlugins = [
new HappyPack({
id: 'js',
// @see
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
new ExtractTextPlugin({
filename: 'css/[name].css?[contenthash:8]',
allChunks: true
})
];
entryHtml.forEach(function (v) {
configPlugins.push(new HtmlWebpackPlugin(v));
});
// webpack 配置
plugins: configPlugins, Entwicklung
webpack-dev-server implementiert Funktionen wie die automatische Aktualisierung der Entwicklungsumgebung
// webpack 配置
devServer: {
contentBase: [
path.join(ROOT, 'src/')
],
hot: false,
host: '0.0.0.0',
port: 8080
}
Entwicklung
npm start
http://localhost:8080/view
Build
cross-env implementiert die Unterscheidung zwischen Entwicklungs- und Produktionsumgebungskonstruktion
| 命令 | 说明 |
|---|---|
npm run dev |
开发环境构建，不压缩代码 |
npm run build |
生产环境构建，压缩代码 |
Lager
Willkommensstern
Bitte geben Sie die Quelle für den Nachdruck an:
Das obige ist der detaillierte Inhalt vonVon Webpack implementiertes Projektgerüst mit mehreren Einträgen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!