webpack打包发布策略

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

新建文件夹webpackdemo

并在vs code中打开文件夹

创建文件夹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'
  }
}

安装生成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'
 +   })
 + ]
}

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

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

生成

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

执行命令 npm run dev

在浏览器中就可以

加入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启动项目查看效果

加入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

发布优化
- 另外创建一份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

设置图片文件的命名规则

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

每次发布删除旧的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(),
    
  ],

将第三方包从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
    
  },