zoukankan      html  css  js  c++  java
  • webpack的总结

    1,首先 项目的入口----package的入口

    "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
    },

    1、首先build;---映射到build.js

       webpack(

    webpackConfig,function(){})

    pasting

    2, webpack的webpack.build.conf.js 的配置 

    webpackConfig=merge(baseWebpackConfig,{})

    var webpackConfig = merge(baseWebpackConfig, {
    entry: entry,
    module: {
    rules: utils.styleLoaders({
    sourceMap: config[buildEnv].productionSourceMap,
    extract: true
    })
    },
    devtool: config[buildEnv].productionSourceMap ? '#source-map' : false,
    output: {
    path: config[buildEnv].assetsRoot, //导出文件的绝对路径
    filename: utils.assetsPath(config[buildEnv]['filename']),//当初文件的文件名
    chunkFilename: utils.assetsPath(config[buildEnv]['chunkFilename'])//编译输出的文件
    },
    plugins: [
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({//配置全局环境为生产环境

    'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({ //JS文件的压缩
    compress: {
    warnings: false,
    drop_debugger: true,
    drop_console: true
    },
    sourceMap: config[buildEnv].productionSourceMap
    }),
    // extract css into its own file
    new ExtractTextPlugin({ // 分离css的插件
    filename: utils.assetsPath(config[buildEnv]['styleFilename'])
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({ // css多处重复引用,一个过滤
    cssProcessorOptions: {
    safe: true
    }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    // new HtmlWebpackPlugin({
    // filename: config[buildEnv].index,
    // template: 'index.html',
    // inject: true,
    // minify: {
    // removeComments: true,
    // collapseWhitespace: false,
    // removeAttributeQuotes: false
    // // more options:
    // // https://github.com/kangax/html-minifier#options-quick-reference
    // },
    // // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    // chunksSortMode: 'dependency'
    // }),
    // split vendor js into its own file
    // new webpack.optimize.CommonsChunkPlugin({
    // name: 'vendor',
    // minChunks: function (module, count) {
    // // any required modules inside node_modules are extracted to vendor
    // return (
    // module.resource &&
    // /.js$/.test(module.resource) &&
    // module.resource.indexOf(
    // path.join(__dirname, '../node_modules')
    // ) === 0
    // )
    // }
    // }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    // new webpack.optimize.CommonsChunkPlugin({
    // name: 'manifest',
    // chunks: ['vendor']
    // }),
    // copy custom static assets

    ]
    })

    多入口的模板的配置

    new HtmlWebpackPlugin({
    filename: page.filename,
    template: page.template,
    chunks: [].concat(page.chunks).concat(htmlBundleConcat),
    inject: page.inject,
    minify: typeof (config[buildEnv].htmlMinify) === 'object' ? Object.assign({}, config[buildEnv].htmlMinify) : {},
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
    })

    //分离公共js到vendor中

    new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    chunks: ['vendor']
    })

    复制static下的内容到指定的文件中

    new CopyWebpackPlugin([
    {
    from: path.resolve(__dirname, '../static'),
    to: config[buildEnv].assetsSubDirectory,
    ignore: ['.*']
    }
    ])

     配置开启Gzip 的压缩,对生成的文件进行压缩,生成.gp的文件

    if (config[buildEnv].productionGzip) {
    var CompressionWebpackPlugin = require('compression-webpack-plugin')

    webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: new RegExp(
    '\.(' +
    config[buildEnv].productionGzipExtensions.join('|') +
    ')$'
    ),
    threshold: 10240,
    minRatio: 0.8
    })
    )
    }

    baseWebpackConfig  文件的配置

    {
    entry: mutiEntry, //js以数据方式写入,代表多页面入口文件配置
    output: { //js页面出口文件的文件配置
    path: config[buildEnv]['assetsRoot'],
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'test'
    ? config[buildEnv]['assetsPublicPath']
    : config.dev.assetsPublicPath
    },
    resolve: { //js的其他色解决的方案
    extensions: ['.js', '.vue', '.json'],
    modules: ['node_modules', path.resolve(__dirname, '../src/style/sprite')],
    alias: {
    'vue$': 'vue/dist/vue.esm.js',
    '@': resolve('src')
    }
    },
    module: {
    rules: [
    exportsEslintRule,
    {
    test: /.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
    },
    {
    test: /.js$/,
    loader: 'babel-loader',
    include: [resolve('src'), resolve('test')]
    },
    {
    test: /.(png|jpe?g|gif|svg)(?.*)?$/,
    loader: 'url-loader',
    options: {
    limit: config.commonConfig.img2base64Limit,
    name: utils.assetsPath(config[buildEnv]['imgname'])
    }
    },
    {
    test: /.(woff2?|eot|ttf|otf)(?.*)?$/,
    loader: 'url-loader',
    options: {
    limit: config.commonConfig.font2base64Limit,
    name: utils.assetsPath(config[buildEnv]['fontname'])
    }
    }
    ]
    }
    //js module的loder的配置例如:vue-loder,beble-loader编译器解决方案--编译,url-loader图片的loader

     

     二,对于webpack_dev执行的顺序

     1,webpack是由express  搭建的服务

    查看一下express 的配置

    // 中间middleware是

    var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    quiet: true
    })
    //中间middleware实现的是自动刷新的功能
    var hotMiddleware = require('webpack-hot-middleware')(compiler, {
    log: () => {}
    }) 

     //1.将编译后的生成的静态文件放在内存中,所以在npm run dev后磁盘上不会生成文件

    //2.当文件改变时,会自动编译。

    //3.当在编译过程中请求某个资源时,webpack-dev-server不会让这个请求失败,而是会一直阻塞它,直到webpack编译完毕

     pasting

    var devMiddleware = require('webpack-dev-middleware')(compiler, {
    publicPath: webpackConfig.output.publicPath,
    quiet: true
    })

     dev.conf.js 做的事情

    var webpackConfig = merge(baseWebpackConfig, {
    module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
    },
    // cheap-module-eval-source-map is faster for development
    devtool: '#cheap-module-eval-source-map',
    plugins: [
    new webpack.DefinePlugin({//定义webpack全局的变量
    'process.env': config.dev.env
    }),
    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
    new webpack.HotModuleReplacementPlugin(),//热更新插件
    new webpack.NoEmitOnErrorsPlugin(),//不触发错误,即运行之后的包正常的运行
    // https://github.com/ampedandwired/html-webpack-plugin
    // new HtmlWebpackPlugin({
    // filename: 'index.html',
    // template: 'index.html',
    // inject: true
    // }),
    new FriendlyErrorsPlugin() // 友好的提示错误
    ]
    })

    for(var key in config.pages){
    var page = config.pages[key]
    webpackConfig.plugins.push(
    new HtmlWebpackPlugin({//编译之后文件的入口
    filename: page.filename,
    template: page.template,
    chunks: page.chunks,
    inject: page.inject
    })
    )
    }
  • 相关阅读:
    【crontab】误删crontab及其恢复
    New Concept English there (7)
    New Concept English there (6)
    New Concept English there (5)
    New Concept English there (4)
    New Concept English there (3)
    New Concept English there (2)Typing speed exercise
    New Concept English there (1)Typing speed exercise
    New Concept English Two 34 game over
    New Concept English Two 33 94
  • 原文地址:https://www.cnblogs.com/yayaxuping/p/9588244.html
Copyright © 2011-2022 走看看