webpack

webpack环境的安装与配置

安装node环境

1.先去nodejs官网下载并安装nodejs
安装完成后, 在命令行输入 node -v 可以查看是否安装成功!

$ node -v
v14.16.1

2.改变原有的环境变量
在nodejs根目录下创建两个目录,分别是: node_global 和 node_cache
输入以下命令改变npm配置

npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"

3.在环境变量添加系统变量
此后所安装的模块都会安装到改路径下

变量名: NODE_PATH
变量值: E:\nodejs\node_global\node_modules

安装cnpm

1.安装cnpm淘宝镜像源

npm install -g cnpm --registry=https://registry.npm.taobao.org

2.添加系统环境变量

E:\nodejs\node_global

3.验证是否全局是否可以访问到cnpm

$ cnpm -v

cnpm@7.0.0 (E:\nodejs\node_global\node_modules\cnpm\lib\parse_argv.js)
npm@6.14.13 (E:\nodejs\node_global\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@14.16.1 (E:\nodejs\node.exe)
npminstall@5.0.1 (E:\nodejs\node_global\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=E:\nodejs\node_global
win32 x64 10.0.19043
registry=https://registry.nlark.com

安装webpack

1.这里先在 全局 安装 webpack3.6.0 版本

cnpm install webpack@3.6.0 -g

2.验证是否安装成功

$ webpack --version
3.6.0

webpack的基本使用

1.webpack打包 入口文件 生成文件

webpack .\src\main.js .\dist\bundle.js

webpack的配置

1.初始化npm, 生成package.json文件

npm init

2.查看package.json文件

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "author": "",
  "license": "ISC",
}

3.在项目根目录新建webpack配置文件(webpack.config.js)
4.编写webpack配置文件(webpack.config.js)

注意: path路径必须要是绝对路径, 这里可以导入path模块来获取绝对路径, 然后通过path.resolve()方法来进行动态路径拼接

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

5.安装 局部webpack

注意: 因为如果所有的项目都用全局的webpack,可能在打包的时候会因为环境问题出错, 所以在项目中一般都是每个项目使用的都是各自的webpack.

① 安装局部webpack

cnpm install webpack@3.6.0 --save-dev

② 再次查看package.json文件

会发现后面多了两行

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

③ 然后在script中加入如下指令
"build": "webpack"

{
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

④ 局部webpack打包

$ npm run build

> meetwebpack@1.0.0 build E:\H5\Code\Vue\Vue\3.Vue-cli\webpack\02-webpack的配置
> webpack

Hash: 0bd4f09244f0e8c60354
Version: webpack 3.6.0
Time: 45ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.47 kB       0  [emitted]  main
   [0] ./src/main.js 0 bytes {0} [built]

为什么要使用 npm run build 而不使用 webpack 命令打包?

1.因为直接使用 webpack 打包的话, 一定会是以全局webpack的方式进行打包,
如果使用 npm run build 进行打包, 就会优先使用局部webpack来打包, 如果没有局部webpack, 才会使用全局webpack打包.
2.如果使用 webpack 进行打包, 以后加参数后命令可以会比 npm run build 更长

loader

loader是webpack中一个非常核心的概念

  • webpack用来做什么呢?
  • 在我们之前的实例中,我们主要是用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖

  • 但是,在开发中我们不仅仅有基本的js代码处理,我们也需要加载css,图片,也包括一些高级的将ES6转成ES5代码,将TypeScript转换成ES5代码,将scss,less转成css,将.jsx,.vue文件转成js文件等等
  • 对于webpack本身的能力来说,对于这些是不支持的
  • 那怎么办呢?给webpack扩展对应的loader就可以了

  • loader使用过程
  • 步骤一: 通过npm安装需要使用的loader

  • 步骤二: 在webpack.config.js中的module关键字下进行配置

CSS样式的安装预配置

1.安装css-loader和style-loader

  • css-loader 只负责加载CSS文件
  • style-loader 负责将CSS样式添加到 DOM 中
  • 使用多个loader时, 是从右向左的
cnpm install --save-dev css-loader@2.0.2
cnpm install --save-dev style-loader@0.23.1

2.修改webpack配置文件

const path = require("path")

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    // 在这里配置loader
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
        ],
    },
}

less的安装与配置

1.安装less的loader

cnpm install less@3.9.0 less-loader@4.1.0 --save-dev

2.修改webpack配置文件

const path = require("path")

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },
}

图片的安装与配置

当加载的图片, 小于limit时, 需要使用 url-loader 将图片编译成base64字符串的形式
当加载的图片, 大于limit时, 需要使用 file-loader 模块进行加载

1.安装图片的loader

cnpm install url-loader@1.1.2 --save-dev
cnpm install file-loader@3.0.1 --save-dev

2.修改webpack配置文件

const path = require("path")

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        publicPath: "dist/"
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            }
        ],
    },
}

3.打包

npm run build

4.修改公共路径
打包完成后,打开页面会发现找不到刚刚的那张图片,是因为打包过程中会把大于 limit图片使用 hash重名后,放到 dist/文件夹下, 所以我们需要在webpack配置文件里面 output下重新定义 publicPath的路径

publicPath: "dist/"

5.生成想要的图片路径及名称
在图片loader的 option下面加入 name来定义

name: 'img/[name].[hash:8].[ext]'

babel的安装与配置

1.安装babel的loader

cnpm install --save-dev babel-loader@7.1.5 babel-core@6.26.3 babel-preset-es2015@6.24.1

2.配置babel的loader

const path = require("path")

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        publicPath: "dist/"
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ],
    },
}

webpack配置Vue

1.安装vue

因为vue是需要在开发和生产环境中都需要用到的, 所以--save后面就不需要加-dev

cnpm install vue --save

2.编辑webpack配置文件

const path = require("path")

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        publicPath: "dist/"
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            }
        ],
    },
    // 配置Vue
    resolve: {
        alias: {
            // 将默认改为 runtime-compiler 的方式
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

webpack配置Vue模板抽离

1.安装vue-loader和vue-template-compiler

cnpm install --save-dev vue-loader@15.4.2 vue-template-compiler@2.5.21

2.编辑webpack配置文件

const path = require("path")

module.exports = {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        publicPath: "dist/"
    },
    module: {
        rules: [
            // css配置
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            // less配置
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            // 图片配置
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            // Vue配置
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            // Vue模板抽离配置
            {
                test: /\.vue$/i,
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        alias: {
            // 将默认改为 runtime-compiler 的方式
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

3.然后打包

npm run build

4.会发现报错了, 这是因为在vue-loader15版本以后, 需要配合插件一起使用才可以
这里先手动降低vue-loader到15版本以下

修改 package.json文件中的vue-loader版本为13版本以上

"vue-loader": "^13.0.0",

重新安装npm包

cnpm install

5.再次打包就好了

npm run build

plugin

版权声明的插件

1.在webpack配置文件引入webpack

const webpack = require('webpack')

2.配置webpack插件

plugins: [
    // 版权声明插件
    new webpack.BannerPlugin("最终版权归Shuai所有")
]

打包HTML的plugin

1.需要先安装此插件

cnpm install html-webpack-plugin@3.2.0 --save-dev

2.编辑webpack配置文件
加入如下代码

// 1. 先注释原来写的下面这行代码:
// publicPath: "dist/"

// 2. 引入插件:
const HtmlWebpackPlugin = require('html-webpack-plugin')

// 3. 在插件下面加入如下代码:
new HtmlWebpackPlugin({
    template: 'index.html'
})

3.编写html模板
将根目录的 index.html改为要生成的模板文件,
4.编译打包

npm run build

5.最终就会生成dist文件夹下面的 index.html文件

js压缩插件

1.安装js压缩插件

cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev

2.配置webpack插件
修改webpack配置文件

// 1. 引入插件
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

// 2. 在插件下面加入如下代码:
new UglifyjsWebpackPlugin()

3.编译打包

npm run build

搭建本地服务器, 用来监听项目文件变化

1.安装服务

cnpm install webpack-dev-server@2.9.3 --save-dev

2.配置

// 监听文件变化服务器
devServer: {
    // 监听文件夹
    contentBase: './dist',
    // 是否实时监听变化
    inline: true
}

3.开启服务
① 直接运行服务

E:\H5\Code\Vue\Vue\3.Vue-cli\webpack\05-webpack的plugin配置  (meetwebpack@1.0.0)
$ node_modules\.bin\webpack-dev-server

package.json文件中的 script 里面添加命令:

--open: 自动打开默认浏览器

"dev": "webpack-dev-server --open"

然后再运行:

npm run dev

然后就OK了, 现在如果更改前端文件的话, 页面就会自动同步刷新

webpack配置文件分离

1.分离webpack配置文件
在项目根目录新建一个 build文件夹, 在 build文件夹里面新建: base.config.js, prod.config.js, dev.config.js三个文件
分别对应: 公共配置文件, 生产配置文件, 开发配置文件, 然后将 webpack.config.js中的内容, 按类型分别放到这三个配置文件中

2.安装 配置分离文件需要的包

cnpm install webpack-merge@4.1.5 --save-dev

3.配置
prod.config.js

const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
const WebpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = WebpackMerge(baseConfig, {
    // 插件
    plugins: [
        // js压缩插件
        new UglifyjsWebpackPlugin()
    ]
})

dev.config.js

const WebpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')

module.exports = WebpackMerge(baseConfig, {
    // 监听文件变化服务器
    devServer: {
        // 监听文件夹
        contentBase: './dist',
        // 是否实时监听变化
        inline: true
    }
})

base.config.js

const path = require("path")
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 输入
    entry: "./src/main.js",
    // 输出
    output: {
        // 路径
        path: path.resolve(__dirname, 'dist'),
        // 文件名
        filename: "bundle.js",
        // 工作路径
        // publicPath: "dist/"
    },
    // 模块
    module: {
        // 规则
        rules: [
            // css配置
            {
                // 过滤文件
                test: /\.css$/i,
                // 使用插件
                use: ["style-loader", "css-loader"],
            },
            // less配置
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            // 图片配置
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'img/[name].[hash:8].[ext]'
                        }
                    }
                ]
            },
            // Vue配置
            {
                test: /\.m?js$/,
                // 排除的文件夹
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            // Vue模板抽离配置
            {
                test: /\.vue$/i,
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        alias: {
            // 将默认改为 runtime-compiler 的方式
            'vue$': 'vue/dist/vue.esm.js'
        },
        // 引入时可以忽略的文件后缀名
        extensions: ['.js', '.vue', '.json', '.scss', '.css']
    },
    // 插件
    plugins: [
        // 版权声明插件
        new webpack.BannerPlugin("最终版权归Shuai所有"),
        // 打包html插件
        new HtmlWebpackPlugin({
            template: 'index.html'
        })
    ]
}

现在我们原来写的 webpack.config.js这个文件就没用了

4.修改 package.json配置文件

如果现在我们执行 npm run build的话, 是会报错的,因为现在 webpack.config.js配置文件已经不存在了,所以现在要指定配置文件

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --config ./build/prod.config.js",
  "dev": "webpack-dev-server --open --config ./build/dev.config.js"
}

如果现在我们执行 npm run build的话, 会显示打包成功, 但是不会打包到根目录下的dist文件夹下, 而是会打包到根目录下的build/dist这个文件下, 这不是我们想要的, 所以我们就可以通过修改 base.config.js配置文件 output下面的 path的方式, 将文件打包的根目录下的dist文件夹下

path: path.resolve(__dirname, '../dist'),

5.编译打包
现在就会打包到根目录下的dist文件夹下了

npm run build
npm run dev
Last modification:July 30th, 2021 at 08:44 am
如果觉得我的文章对你有用,请随意赞赏