Von Webpack implementiertes Projektgerüst mit mehreren Einträgen

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äß JS Verzeichnis 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!