Code Monkey home page Code Monkey logo

multipage-pack's Introduction

webpack多页打包示例

使用webpack进行多页应用的打包,每个html对应一个入口,自动引入同一目录下的同名资源(js、less)

配置

const webpackOptions = {
    mode: env,  // webpack各个环节的默认配置
    entry: {
                // 这里需要动态加载入口
    },
    output: {
        filename: '[name]/index.[hash].js',
        path: path.resolve(__dirname, 'public/'),
    },
    devServer: { // devserver的配置
        hot: true,
        inline: true,
        compress: true,
        port: 9000
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader'
            },
            {
                test: /\.less$/,
                loader: extractLESS.extract([
                    'css-loader',
                    'less-loader'
                ])
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'file-loader',
                query: {
                    name: 'img/[name].[hash:7].[ext]'
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'file-loader',
                query: {
                    name: 'font/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    plugins: [
        extractLESS,  // 将less文件单独提出为css
    ]
}

配置关键点在于如何动态添加入口,这里我们用fs模块读取src目录中的目录,每一个目录为一个页面,以其中的index.js为入口。

// 遍历需要编译的源目录
module.exports = new Promise(function(resolve, reject) {
    fs.readdir(ROOT, function(err, files) {
        if(err) {
            return reject(err);
        }
        files.filter((file) => !file.includes('.')).forEach(function(entry) {
            webpackOptions.entry[entry] = path.resolve(ROOT, entry , 'index.js'),
            webpackOptions.plugins.push(new HtmlWebpackPlugin({ // 目录下的html也需要打包
                filename: entry + '/index.html',
                template: path.resolve(ROOT, entry , 'index.html'),
                inject: true,
                chunks: [entry] // 只插入同一目录下的js文件避免所有js的插入
            }))
        })
        resolve(webpackOptions);
    })
})

webpack-dev-server

开发环境使用webpack-dev-server可以提高开发效率,需要额外安装webpack-dev-server,另外extract-text-webpack-plugin最新版本才会支持webpack4。webpack-dev-server的自动刷新有两种模式,第一种模式是inline模式,该模式在打包的时候会自动向打包js中注入自动刷新的钩子,iframe模式需要我们访问/webpack-dev-server/xxx,以iframe的形式注入我们的页面。开启inline模式只需要允许webpack-dev-server的时候加入参数 --inline,例如访问src下的home页面,路径为localhost:port/home/index.html。

multipage-pack's People

Contributors

zhoushaotian avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.