史上最详细webpack讲解

时间：2020-01-16 19:25:44 阅读：103 评论：0 收藏：0 [点我收藏+]

标签：操作 xxxx res erp 根据 loader 代码 sde pat

`Webpack`介绍

1.1 `Webpack`是什么

webpack是前端方面的静态资源打包工具,能够让浏览器也支持模块化,他会根据模块的依赖关系进行静态分析,然后按照某种规则生成静态资源

1.2 `WebPack`的作用

webpack的核心主要是进行JavaScript资源打包
把静态文件,例如png,sass,less,css,js等多个文件打包成一个文件,减少页面的请求
可以集成 http 服务器
可继承babel工具,实现ECMAScript6和5的转换,解决兼容问题
可以进行模块热加载,当代码发生改变的时候,自动刷新浏览器

技术图片

`Webpack`安装和案例

2.1`Webpack` 全局安装

安装webpack

安装webpack
npm install -g webpack
或者 安装最新版webpack 
npm install -g webpack@<version>

如果安装的是web pack4 以上的版本,还需要安装Webpack-Cli
```
npm install -g webpack-cli 
```
可以通过npm root -g 查看全局安装目录

2.2`Webpack`快速入门

__VSCode中安装node Snippets有代码提示

2.3 打包`Webpack`模块

webpack xxx -o yyy
这样就把文件打包成了yyy文件
使用的时候直接引入yyy文件,就不会出现 require is not define 这个问题

2.4打包配置文件 `webpack.confifig.js`

每当修改js文件,都要webpack重新打包,打包时还要指定入口和出口,都非常麻烦,通过配置文件进行修改
编写webpack.config.js

//引入path是为了解决路径的小工具
const path=require("path");

module.export={
    //入口文件
    entry:"./src/main.js",
    //出口  出口是一个对象
    output:{
      path:path.join(__dirname,'./dist/'),
        filename:'build.js'
  }
}

编写package.json

{
    "script": {
        "show": "webpack -v",
        "start": "node xxx",
        "build": "webpack"
    }
}

`EcmaScript6`行为规范

导出模块 export 等价于 ( module.exports )
导入模块 import 等价于 ( require )

安装Loader

webpack 本身具有打包JavaScript文件的能力,如果需要打包其他类型文件,则需要使用插件,这些插件被称为加载器( Loader )
Loader 可以看作为资源和模块的转换器,它本身是一个函数,接受的是源文件,返回值是转换后的结果
这样,我们就可以通过require和import 来引入不同的文件类型了
打包CSS文件

安装 style-loader 和 css-loader依赖
npm install -D style-loader css-loader
修改webpack.config.js

const path = require("path");

module.exports = {
    mode: "none",
    entry: "xxx", //入口文件
    output: {
     path: path.join(__dirname,"xx") //输出文件路径
        filename: "xxxx.yy"  //输出文件的名字
 },
    module: {
        rules: [
            {
                test: /\.css$/,  //匹配后缀名为css的文件
                use: [
                    "style-loader",
                    "css-loader"
                ]
            }
        ]
    }
}

打包Images资源文件

安装file-loader依赖
npm install -D file-loader
修改webpack.config.js

const path = require("path");

module.exports = {
    mode: "none",
    entry: "xxx",
    output: {
        path: path.join(__dirname,"xxx"),
        filename: "name"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    "style-less",
                    "css-less"
                ]
            },
            {
                test: /\.(png|jpg|svg|fig)$/,
                use: [
                    "file-loader"
                ]
            }
        ]
    }
}

安装HtmlWebpackPlugin插件
目的: 将index.html 打包到build.js所在的目录当中

安装插件
npm install -D html-webpack-plugin
修改webpack.config.js

plugins: [
    new HtmlWebpackPlugin({
        template:'./index.html'
    })
]

修改index.html文件

//不需要再引入<srcipt src="xxxx.js">

实现重新加载

5.1说明

问题:

每一次手动打包很麻烦,打包之后还需要手动刷新浏览器
解决:

采用webpack提供的工具: webpack-dev-server , 他无需打包和手动刷新浏览器,会自动打包,提高开发效率

5.2实际操作

安装依赖:
```
npm install -D webpack-dev-server
```
修改webpack.config.js:

const path = require("path");
const htmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "none",
    entry: "xxx",  //入口文件
    output: {
        path: path.join(__dirname,xxx),
        filename: xxxx
    },
    //实现重新加载
    devServer:{
        contentBase: './dist'
    }
}

修改package.json

{
    "scripts":{
        "show": "webpac -v",
        "dev": "webapck-dev-server --open"
    }
}

浏览器兼容Babel

6.1安装Babel

npm install -D babel-loader @babel/core @babel/preset-env

6.2配置`Webpack.config.js`

module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/, //排除的目录
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"] //内置好的转译工具
                }
            }
        }
    ]
}

6.3`Main.js`代码

const a=1;

const arr = [1,2,3];
arr.foreach(item=>{
    console.log(item)
})

7`Vue-loader`打包`Vue`单文件组件

安装vue-loader和vue-template-compiler依赖

npm install -D vue-loader vue-template-compiler
修改webpack.config.js配置:

const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
    //解析完整的Vue
    resolve: {
      alias: {
          'vue$': 'vue/dist/vue.js'
      }  
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    plugin: [
        //引入并且使用这个插件
        new VueLoaderPlugin()
    ]
}

模块热替换

修改webpack.config.js的代码

const path = require("path");
const webpack = require("webpack");
const htmlWebpackPlugin = require("html-webpack-plugin");
const VueLoaderPlugin = require("vue-loader/lib/plugin");

module.exports={
    mode:"none",
    entry: "" ,
    output: {
        path: path.join(__dirname,xx),
        filename:xxx
    },
    devServer: {
        contentBase: 'xxx',
        hot: true
    },
    plugins: [
        //模块热替换
        new webpack.HotModuleReplacementPlugin(),
        //引入vue模块
        new VueLoaderPlugin(),
        new htmlWebpackPlugin({
            template: 'xxx'
        })
    ],
    modules: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style.loader',
                    'css-loader'
                ]
            },
            {
              test: /\.(png|svg|jpg|gif)$/,
              use: [
                    'file-loader'
                ]
            },
            {
                test: /\.vue$/,
                use: [
                    'vue-loader'
                ]
            }
        ]
    }
}

`package.json`的配置

`proxy` 字段

这个字段主要是用来解决跨域的问题
设置
```
"proxy": "http://localhost:9093"
```
使用

axios.get('/data').then((res)=>{
  console.log(res);
})

基本字段

name 项目名称
version 项目版本

Scripts字段

用来运行npm脚本

"scripts": {
    "preinstall": "echo here it comes!",
    "postinstall": "echo there it goes!",
    "start": "node index.js",
    "test": "tap test/*.js"
}

使用的时候运行 npm run xxx对应上面的具体命令

dependencies字段, devdependencies

分别指定项目运行所依赖的模板和项目开发时所需要的模板
对应的版本限制
- 比如1.2.2 大版本,次要版本,小版本
- ~1.2.2 表示安装1.2.x的最新版本不低于1.2.2版本不安装1.3.x
- ^1.2.2 表示安装1.x.x的最新版本不低于1.2.2版本不安装2.x.x
- latest 安装最新版本

bin字段

用来指定内部可以执行文件的位置

{
    "bin":{
        "xxx": "xxx/xxx/xxx.js"
    }
}

main字段

指定了加载的入口文件默认就是index.js

repository字段

```“repository”: {
“repository”: {
“type”: “git”,
“url”: “git+https://github.com/XXXX”
},
“author”: “mayuan”,
“license”: “ISC”,
“bugs”: {
“url”: “https://github.com/XXXX”
}

```

史上最详细webpack讲解

标签：操作 xxxx res erp 根据 loader 代码 sde pat

原文地址：https://www.cnblogs.com/sunhang32/p/12202546.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

史上最详细webpack讲解

Webpack介绍

1.1 Webpack是什么

1.2 WebPack的作用

Webpack安装和案例

2.1Webpack 全局安装

2.2Webpack快速入门

2.3 打包Webpack模块

2.4打包配置文件 webpack.confifig.js

EcmaScript6行为规范

安装Loader

实现重新加载

5.1说明

5.2实际操作

浏览器兼容Babel

6.1安装Babel

6.2配置Webpack.config.js

6.3Main.js代码

7Vue-loader打包Vue单文件组件

模块热替换

package.json的配置

proxy 字段

基本字段

Scripts字段

dependencies字段, devdependencies

bin字段

main字段

repository字段

`Webpack`介绍

1.1 `Webpack`是什么

1.2 `WebPack`的作用

`Webpack`安装和案例

2.1`Webpack` 全局安装

2.2`Webpack`快速入门

2.3 打包`Webpack`模块

2.4打包配置文件 `webpack.confifig.js`

`EcmaScript6`行为规范

6.2配置`Webpack.config.js`

6.3`Main.js`代码

7`Vue-loader`打包`Vue`单文件组件

`package.json`的配置

`proxy` 字段