zoukankan      html  css  js  c++  java

  • webpack打包发布策略

    webpack打包发布策略

    通过一个最简单的demo来学习和掌握webpack的打包发布策略

    1. 新建文件夹webpackdemo

      并在vs code中打开文件夹

    2. 创建文件夹src和dist

      在src中创建文件index.html

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>这是第1个li</li>
    <li>这是第2个li</li>
    <li>这是第3个li</li>
    <li>这是第4个li</li>
    <li>这是第5个li</li>
    <li>这是第6个li</li>
    <li>这是第7个li</li>
    <li>这是第8个li</li>
    <li>这是第9个li</li>
    <li>这是第10个li</li>
  </ul>
</body>
</html>

      在src中创建main.js

      我们使用jquery实现隔行变色

      先安装包 yarn add jquery

      main.js中实现代码

      import $ from 'jquery'

$(function(){

  $("li:odd").css('backgroundColor','pink')
  $("li:even").css('backgroundColor','lightblue')

})

    3.配置打包文件添加webpack.config.js

    并且设置打包的入口和出口文件

    const path=require('path')

module.exports={
  entry:path.join(__dirname,'./src/main.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  }
}

    1. 安装生成html的插件 html-webpack-plugin yarn add html-webpack-plugin --dev

      在webpack.config.js中配置插件

      const path=require('path')
+ const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  entry:path.join(__dirname,'./src/main.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  },
 + plugins:[
 +  new htmlWebpackPlugin({
 +     template:path.join(__dirname,'./src/index.html'),
 +     filename:'index.html'
 +   })
 + ]
}

    2. 安装打包使用的插件 webpack-dev-server yarn add webpack-dev-server --dev

      安装webpack-cli，这里由于版本的冲突导致的打包失败，需要安装webpack-cli@3 yarn add webpack-cli@3 --dev

    3. 生成

      在package.json中添加 "dev":"webpack-dev-server --open --port 3000 --hot"

      执行命令 npm run dev

      在浏览器中就可以

      1. 加入scss文件

        • 在src文件夹下添加css文件夹，添加index.scss样式文件
        html,body{
  padding: 0;
  margin: 0;
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
    li{
      padding-left: 15px;
      line-height: 30px;
    }
  }
  .box{
     300px;
    height: 200px;
    background: url(../images/1.jpg);
    background-size: cover;
  }
}

        • 在main.js入口文件中引入scss样式文件

          import './css/index.scss'

        • 安装相应的loader

          yarn add style-loader css-loader sass-loader node-sass url-loader file-loader --dev

        • 在webpack.config.js文件中进行配置

          const path=require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  entry:path.join(__dirname,'./src/main.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  },
  plugins:[
    new htmlWebpackPlugin({
      template:path.join(__dirname,'./src/index.html'),
      filename:'index.html'
    })
  ],
  module:{
    rules:[
      {test:/.css$/,use:['style-loader','css-loader']},
      {test:/.scss$/,use:['style-loader','css-loader','sass-loader']},
      {test:/.(jpg|bpm|png|gif)$/,use:'url-loader?limit=5000'},
    ]
  }
}

        • 执行npm run dev启动项目查看效果

      2. 加入es6高级语法

        • 在main.js中添加如下的代码

          class person{
  static info={name:"你好"}
}
console.log(person.info.name)

        • 安装对应的babel插件

          yarn add @babel/core babel-loader @babel/plugin-transform-runtime @babel/preset-env --dev

        • 在webpack.config.js中配置loader

           module:{
    rules:[
      {test:/.css$/,use:['style-loader','css-loader']},
      {test:/.scss$/,use:['style-loader','css-loader','sass-loader']},
      {test:/.(jpg|bpm|png|gif)$/,use:'url-loader?limit=5000'},
    + {test:/.js$/,use:'babel-loader',exclude:/node_modules/},
    ]
  }

        • 创建.babelrc文件并对插件和预设进行配置

          {
  "presets":["@babel/env"],
  "plugins":["@babel/transform-runtime","@babel/proposal-class-properties"]
}

        • npm run dev

      3. 发布优化

        • 另外创建一份webpack.pub.config.js文件

      const path=require('path')
      const htmlWebpackPlugin=require('html-webpack-plugin')
      module.exports={
      entry:path.join(__dirname,'./src/main.js'),
      output:{
      path:path.join(__dirname,'./dist'),
      filename:'bundle.js'
      },
      plugins:[
      new htmlWebpackPlugin({
      template:path.join(__dirname,'./src/index.html'),
      filename:'index.html'
      }),
      ],
      module:{
      rules:[
      {test:/.css$/,use:['style-loader','css-loader']},
      {test:/.scss$/,use:['style-loader','css-loader','sass-loader']},
      {test:/.(jpg|bpm|png|gif)$/,use:'url-loader?limit=5000'},
      {test:/.js$/,use:'babel-loader',exclude:/node_modules/},
      ]
      }
      }

       ```

      • 在package.json中配置节点

        "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "dev": "webpack-dev-server  --port 3000 --hot",
    "pub": "webpack --config webpack.pub.config.js"
  },

        执行 npm run pub可以对项目进行打包

      • 配置webpack.pub.config.js

        1. 设置图片文件的命名规则

            {test:/.(jpg|bpm|png|gif)$/,use:'url-loader?limit=5000&name=images/[hash:8]-[name].[ext]'},

        2. 每次发布删除旧的dist文件

          • 安装插件 yarn add clean-webpack-plugin --dev

          • 配置

            const {CleanWebpackPlugin}=require('clean-webpack-plugin')

plugins:[
    new htmlWebpackPlugin({
      template:path.join(__dirname,'./src/index.html'),
      filename:'index.html'
    }),
    new CleanWebpackPlugin(),
    
  ],

        3. 将第三方包从bundle.js中抽离出来

          使用optimization.splitChunks配置,打包生成的js和html代码就是已经是压缩的文件

           entry:{
    app:path.join(__dirname,'./src/main.js'),
  + vendors:['jquery']//配置哪些第三方需要被抽取
  },
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'js/[name].js'//抽取出来的包的命名
  },
   optimization:{
    //抽取第三方包
    splitChunks: {
      chunks:'all'
    },
    //代码压缩
    minimize:true
    
  },
  • 相关阅读:
    Windows-快速预览文件-QuickLook
    Chrome简洁高效管理下载项
    有Bug？你的代码神兽选对了吗
    保护视力-刻不容缓
    一次看懂 Https 证书认证
    Web前端助手-功能丰富的Chrome插件
    Chrome自动格式化Json输出
    网络爬虫
    彻底搞懂Cookie,Session,Token三者的区别
    Redis内存满了的解决办法
  • 原文地址：https://www.cnblogs.com/lucyliang/p/14212508.html
Copyright © 2011-2022 走看看