Maison >interface Web >tutoriel HTML >Échafaudage de projet à entrées multiples implémenté par webpack
Un échafaudage de projet multi-entrées basé sur webpack2, utilisant principalement extract-text-webpack-plugin pour implémenter l'extraction de code public js et css, html-webpack-plugin pour implémenter html multi-entrées, et less-loader pour implémenter moins de compilations, postcss-loader configure le préfixe automatique pour ajouter automatiquement des préfixes compatibles avec le navigateur, html-withimg-loader implémente l'ajout de numéros de version d'image et de fonctions de modèle dans HTML, babel-loader implémente la fonction de transcodage ES6 et happypack multi- le filetage accélère la vitesse de construction.
├── 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
Obtenir un tableau multi-entrées selon
JS
répertoire
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: '/' }, }
Utilisez babel pour convertir ES2015 en ES5, less en CSS et utilisez postcss pour implémenter le préfixe automatique pour ajouter automatiquement la compatibilité du navigateur, url-loader pour implémenter le CSS pour référencer les images et les polices et ajoute des numéros de version, html -withimg-loader implémente des images de référence HTML, ajoute des numéros de version et implémente des fonctions de modèle.
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'], }) ] }
Selon la correspondance de l'annuaire, obtenez l'entrée html correspondant à js
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; }
Utilisez le multi-threading happypack pour accélérer la construction. CommonsChunkPlugin implémente l'extraction des js publics dans des fichiers séparés, extract-text-webpack-plugin implémente l'extraction des CSS publics dans des fichiers séparés,
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,
webpack-dev-server implémente des fonctions telles que l'actualisation automatique de l'environnement de développement
// webpack 配置 devServer: { contentBase: [ path.join(ROOT, 'src/') ], hot: false, host: '0.0.0.0', port: 8080 }
npm start
http:/ /localhost:8080/view
cross-env implémente la distinction entre la construction d'un environnement de développement et de production
命令 | 说明 |
---|---|
npm run dev |
开发环境构建,不压缩代码 |
npm run build |
生产环境构建,压缩代码 |
Étoile de bienvenue
Veuillez indiquer la source de réimpression :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!