zoukankan      html  css  js  c++  java
  • webpack4 打包

    1. 基本安装及命令

    npm config set registry https://registry.npm.taobao.org     //  淘宝镜像
    npm install webpack-cli -g   //  安装之后才能  webpack  -v

    webpack index.js -o out.js     // 打包指定文件  指定输出路径及名称
    webpack --mode development index.js -o out.js   //  指定打包方式为开发模式(默认为产品模式:去除console命令及其他未引用代码)

    ( src - dist  4.0版本默认不需配置《代码资源放置在src,生成的代码资源放置在dist 》,但也可以增加配置文件 webpack.config.js )

    常用的 webpack.config.js

    var path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js', 
        path: path.resolve(__dirname, 'out')
      }
    };
    View Code

    webpack --mode development  // 只用 webpack,则默认为 production 模式,去除多余部分及调试提示

    2. 合并打包

    var path = require('path');
    
    module.exports = {
      entry: ['./src/a.js','./src/b.js','./src/c.js'],
      output: {
        filename: 'bundle.js', 
        path: path.resolve(__dirname, 'out')
      }
    };
    View Code

    3. 分块打包

    var path = require('path');
    
    module.exports = {
      entry: {
          a:'./src/a.js',
          b:'./src/b.js',
          c:'./src/c.js'
      },
      output: {
        filename: '[name].build.js', 
        path: path.resolve(__dirname, 'out')
      }
    };
    View Code

    4. 配置属性为开发模式  mode: development

    5.url-loader 处理小图片

    npm init

    npm install url-loader --save

    npm install file-loader --save  // 图片尺寸超过限制时使用

    var path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js', 
        publicPath: './out/', // 最后的 / 不可少,两个 out 对应,确保 生成的大文件图片路径正确
        path: path.resolve(__dirname, 'out')
      },
      mode:'production',
      module: {
        rules: [
          {
            test: /.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192
                }
              }
            ]
          }
        ]
      }
    };
    View Code

    6. 引入 jquery     expose-loader 

    npm install expose-loader --save-dev

    npm install jquery --save 

    var path = require('path');
    
    module.exports = {
      entry: './src/index.js',
      output: {
        filename: 'bundle.js', 
        publicPath: './out/', // 最后的 / 不可少,两个 out 对应,确保 生成的大文件图片路径正确
        path: path.resolve(__dirname, 'out')
      },
      mode:'production',
      module: {
        rules: [
          {
            test: /.(png|jpg|gif)$/,
            use: [
              {
                loader: 'url-loader',
                options: {
                  limit: 8192
                }
              }
            ]
          },
          {
            test: require.resolve('jquery'),
            loader: 'expose-loader?jQuery!expose-loader?$!expose-loader?scrollable'
          }
        ]
      }
    };
    View Code

    使用  import $ from 'expose-loader?$!jquery';

    相关链接:

    loaders

    webpack 踩坑

    webpack:使用expose-loader 解决第三方库的插件依赖问题

    webpack4导入jQuery的新方案

  • 相关阅读:
    通过输入方式在Android上进行微博OAuth登录
    Android应用集成支付宝接口的简化
    Tomcat启动时报 java.lang.OutOfMemoryError: Java heap space
    Myeclipse中 Exploded location overlaps an existing deployment解决办法
    SVN提交项目时版本冲突解决方案
    Jsp过滤器Filter配置过滤类型汇总
    myeclipse修改jsp文件的名称之后,再也打不开的解决方案
    文件上传之 commons-fileupload(二)
    文件上传之 commons-fileupload(一)
    常见池化技术
  • 原文地址:https://www.cnblogs.com/justSmile2/p/11261201.html
Copyright © 2011-2022 走看看