webpack打包使用_webpack-dev-server --progress --hide-modules-CSDN博客

本文链接：https://blog.csdn.net/m0_47048022/article/details/105977364

准备工作

首先创建一个空文件夹
利用npm init 初始化package.json
创建src文件夹
- index.html (这个里面引入index.js)
- index.js
我们要在index.js中使用jquery，所以要下载jquery
```
cnpm i jquery -S
```

在index.js中利用jq实现效果

import $ from "jquery"

$(function(){
  $('li').css('background','red')
})

借助webpack工具进行打包，让浏览器能够识别import

下载webpack webpack-cli
```
cnpm i webpack webpack-cli -D
```
在package.json中创建一个任务
```
"serve":"webpack"
```

可以利用npm run serve在项目根目录执行任务，在执行任务的时候会提示

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

接下来我们配置一下mode模式，在根目录新建webpack.config.js中配置

module.exports = {
 // production 上线阶段   development  开发阶段
  mode:'development'
}

将index.html中引用的index.js改成我们打包之后的js
```
<script src="../dist/main.js"></script>
```

手动配置打包的入口文件和输出文件

var path = require('path')
module.exports = {
  mode:'development',
  entry:path.join(__dirname,'./src/index.js'),
  output:{
    path:path.join(__dirname,'./dist'),
    filename:'bundle.js'
  }
}

配置webpack-dev-server自动打包功能

第一步下包（包没问题的不要下载，包独立下载的需要下载）
```
cnpm i webpack-dev-server -D
```
在package.json中配置任务
```
"serve": "webpack-dev-server",
```
执行任务
```
npm run serve
```
一旦执行任务之后，项目被运行在http://localhost:8080/（不能双击打开index.html）
webpack-dev-server打包的js没有在磁盘里，而是在内存中的跟目录里，所以我们项目引用的js应该用根目录内存中的这个js
```
<script src="/bundle.js"></script>
```
–host 127.0.0.1 （设置IP地址）
–port 8084（设置端口号）
–open（自动打开浏览器）

配置html-webpack-plugin插件

该插件的作用：1、会在内存中生成一个html，也是在根目录 2、自动引入内存中的bundle.js

下载插件
```
cnpm i html-webpack-plugin -D
```

在webpack.config.js中配置该插件

var htmlWebpackPlugin = require('html-webpack-plugin')
var hwp = new htmlWebpackPlugin({
  template:'./src/index.html', //目标元素，要根据哪个文件来生成
  filename:'index.html'  // 这个是配置在内存中生成的文件的名字
})

// plugins和entry是同级的
plugins:[hwp]

删掉index.html中手动引入的bundle.js
重启 npm run serve

webpack 处理css和less文件

首先在src里面创建css文件夹，在文件夹里面创建1.css
将css在index.js中引入，引入之后，报错了，你需要一个合适的loader去处理这种类型的文件
webpack默认不能处理css文件，所以需要对应的loader去处理，style-loader、css-loader
```
cnpm i style-loader css-loader -D
```

下载完还需要在webpack.config.js去配置

module:{
    rules:[
      { test:/\.css$/, use:['style-loader','css-loader'] }
    ]
  }

重启 npm run serve

处理less文件

下载包
```
cnpm i less less-loader -D
```

下载完还需要在webpack.config.js去配置

module:{
    rules:[
      { test:/\.css$/, use:['style-loader','css-loader'] },
      { test:/\.less$/,use:['style-loader','css-loader','less-loader'] }
    ]
  }

postCss配置步骤

下载对应的包
```
cnpm i postcss-loader autoprefixer -D
```

创建postcss.config.js

// 导入插件
const autoprefixer = require("autoprefixer");
//  使用插件
module.exports = {
    plugins:[ autoprefixer ]
}

修改webpack.config.js,在css规则中再加上postcss-loader即可

{ test:/\.css$/, use:['style-loader','css-loader','postcss-loader'] }

webpack处理url资源文件

下载url-loader、file-loader处理url资源文件
```
cnpm i file-loader url-loader -D
```

在webpack.config.js中配置规则

// 如果图片大于limit  最终是一个图片的路径 图片的名字被随机生成了
// 如果图片小于limit  最终被打包成base64的格式编码
{ test:/\.jpg|gif|png|bmp|svg|eot|woff|woff2|ttf/,use:'url-loader?limit=1902380' }

利用babel 转换高级语法

在index.js中写高级语法
```
class Person {
  static a = 123
}
```

下载包

//  这些包是语法插件
cnpm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

//  转换工具
cnpm i babel-loader @babel/core @babel/runtime -D

配置webpack.config.js

{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/ }

创建babel.config.js

module.exports = {
  presets:["@babel/preset-env"],
  plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}

处理.vue结尾的文件

下包

cnpm i vue-loader vue-template-compiler -D

配置处理vue文件的规则,写在webpack.config.js里面的module>rules
```
{ test:/\.vue/,use:'vue-loader' }
```

在webpack.config.js中引入插件使用

const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
plugins:[hwp,vuePlugin]

结合webpack使用vue

下载vue
```
cnpm i vue -S
```
导入vue，在index.js中导入
```
import Vue from "vue"
```

导入App组件并且渲染App组件

import App from "./components/App.vue"
new Vue({
  el:'#app',
  //  该方法会将App组件替换app监管区域
  render:h=>h(App)
})

页面准备app监管区域
```
<div id="app">
    
</div>
```

webpack 打包发布

在package.json中定义打包的任务
```
"build": "webpack -p"
```
在命令窗口执行 npm run build

脚手架配置element-ui

利用脚手架生成项目
在项目管理面板中找到插件》添加插件
搜索vue-cli-plugin-element并安装
安装完后选择 import on demand 按需导入
复制element官网组件的button组件查看效果