webpack

webpack基本配置

ES6中引入了import和export命令，但是浏览器并不支持这种语法，所以需要使用webpack打包，将多个js文件打包成一个文件，本质上webpack就是打包js的一个打包工具

webpack依赖于npm环境，然而npm又依赖于node，所以需要在官网下载node，推荐下载安装版，会自动配置好环境并且绑定好了npm

下载完成后，由于npm默认镜像源是国外，因此下载会很慢，所以需要更改镜像地址

第一步：在cmd窗口输入以下命令

npm config set registry https://registry.npm.taobao.org/

第二步：输入 npm config get registry命令

npm config get registry

第三步：安装淘宝镜像源

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

接下来便可以安装webpack以及各种架包了

webpack打包文件

环境配置

webpack是基于npm环境，所以我们需要先创建一个npm环境，使用以下命令

npm init

这样便初始化了一个npm环境，这样，我们可以使用npm来管理各种包

可以直接使用命令

webpack 打包的主文件 打包到的位置

例如：

webpack ./src/main.js dist/bundle.js

配置webpack.config.js文件

全局webpack

在webpack4和webpack5中，其默认的输入为

src/index.js

默认输出为

dist/main.js

在该文件下可以设置好入口函数和出口函数，这样webpack打包时就不需要指定路径，可以直接使用以下命令：

webpack

webpack.config.js配置如下：

const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js'
    }
}

npm run webpack

很多时候全局安装的webpack并不支持项目中的webpack，因此往往都在项目环境中安装一个局部webpack

npm install webpack@3.6.0 --save-dev

这样我们可以在package.json中的script模块设置我们的快捷命令

script是脚本文件，这里其实我们可以将build改为任意的名称，重要的是后面的属性值，也就是将要执行的脚本，在node中，run命令是执行的意思，在我们执行build命令的时候，就会去webpack.config.js中查询配置，然后执行webpack

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

模式(mode)

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

module.exports = {
  mode: 'production',
};

loader

webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。

在更高层面，在 webpack 的配置中，loader 有两个属性：

  1. test 属性，识别出哪些文件会被转换。
  2. use 属性，定义出在进行转换时，应该使用哪个 loader。

webpack打包css文件

首先，需要先安装 css-loader：

npm install --save-dev css-loader

接着，安装 style-loader：

npm install --save-dev style-loader

配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],//注意：顺序很重要！
      },
    ],
  },
};

以上配置中，对一个单独的 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器(compiler) 如下信息：

“嘿，webpack 编译器，当你碰到「在 require()/import 语句中被解析为 '.css' 的路径」时，在你对它打包之前，先 use(使用) css-loader 转换一下。”

配置config时，一定要注意，那就是use语句是从后到前，所以一定要将css-loader放在前面，不然会报错：

Module build failed: CssSyntaxError

接着在main.js文件中引入css文件

require('../css/normal.css');

打包less文件

与打包css文件相似，我们需要先安装相应的loader

从官网可以查看命令

需要先安装 less 和 less-loader：

npm install less less-loader --save-dev

然后便和css打包过程一样

webpack.config.js配置：

const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/i,
                loader: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
        ],
    },

}

webpack打包图片

首先需要安装url-loader：

npm install url-loader --save-dev

url-loader是将图片转换为base64编码格式进行文件引入，但是其有一个limit属性，用于限制图片的大小（字节），如果超过这个限制的图片在进行打包时就会报错

此时需要引入另一个file-loader

npm install file-loader

在引入file-loader后，如果事先已经配置了url-loader，那么便不需要再额外配置file-loader

官方文档是这样解释的：

指定文件的最大体积（以字节为单位）。 如果文件体积等于或大于限制，默认情况下将使用 file-loader 并将所有参数传递给它。

接着在webpack.config.js中进行配置

const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                        },
                    },
                ],
            },
        ],
    },

}

当使用file-loader打包文件后，会将文件放入实现规定好的文件夹中，也就是dist文件夹。但是默认情况下webpack会将生成的路径直接返回给使用者，因此，我们需要在路径下添加一个dist/

添加方法是在webpack.config.js中添加publicPath属性

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
        publicPath: 'dist/'
    }
}

很多时候我们想让生成的图片更有规范，这个时候可以在file-loader的options添加name配置

  • img : 文件要打包到的文件夹
  • name : 获取图片原来的名字,放在该位置
  • hash:8 : 为了防止图片名称冲突,依然使用hash ,但是我们只保留8位
  • ext : 使用图片原来的扩展名
const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'images/[name].[hash:8].[ext]'
                        },
                    },
                ],
            },
        ],
    },

}

webpack将ES6转为ES5

首先安装环境

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

配置webpack.config.js文件

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['es2015']
        }
      }
    }
  ]
}

Vue相关

npm引入Vue

因为在后续的工作中还需要用到Vue，所以并不是开发时依赖

安装环境：

npm install vue --save

默认安装时是runtime-only，即不可以有任何的template

我们需要的是runtime-compiler，可以有template因为有compiler可以用于编译template

所以需要切换默认使用的版本

在webpack.config.js里面加上下面的代码

const path = require('path')
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    //注意与entry和output同级
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    }

}

.vue文件封装处理

安装vue编译环境

npm install vue-template-compiler vue-loader

plugin插件

loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建一个插件实例。

添加版权的plugin

该插件是webpack自带的插件

第一步，定义webpack

const webpack = require('webpack');

第二步，配置

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归JSW79所有')
    ]
}

注意plugins是以数组的形式定义，并且和entry和output同一个等级

打包html的plugin

该插件可以打包html，将所有的文件放入指定文件夹，在文件夹中生成index.html，同时将生成的js文件自动插入到html中

第一步，npm引入

npm install html-webpack-plugin --save-dev

第二步，定义html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

第三步，配置webpack.config.js

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

第四步，因为配置html文件和资源文件在一个文件夹，故删去配置的相对地址

publicPath: 'dist/'

压缩js的plugin

webpack有自带的压缩js的插件，但是在脚手架2会报错，这里使用另外一个插件

第一步，npm引入

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

第二步，定义uglifyjs-webpack-plugin

const uglifyjswebpackplugin = require('uglifyjs-webpack-plugin');

第三步，配置webpack.config.js

plugins: [
        new uglifyjswebpackplugin()
    ]

搭建本地服务器

webpack提供了一个可选的本地服务器，可以自动编译开发文件，并将文件暂存于内存中

第一步，npm引入

npm install webpack-dev-server@2.9.1 --save-dev

第二步，配置webpack.config.js

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
    },
    devServer: {
        contentBase: './dist',
        inline: true
    }
}

devserver有4个属性

  • contentBase :为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist
  • port :端口号
  • inline :页面实时刷新
  • historyApiFallback :在SPA页面中,依赖HTML 5的history模式

第四步，配置package.json，添加命令

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

--open为自动打开浏览器

开发与发布文件分离

很多时候开发插件会与正式发布文件会有冲突，比如压缩代码，在开发时就不需要，但在运行时需要，这时候就需要分离

第一步：npm引入

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

第二步：分离文件

将开发文件与正式文件进行分离

如正式文件：

prod.config.js

const uglifyjswebpackplugin = require('uglifyjs-webpack-plugin');
const webpackMerge = require('webpack-merge');
const baseConfig = require('./base.config')

module.exports = webpackMerge(baseConfig, {
    plugins: [
        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');
const uglifyjswebpackplugin = require('uglifyjs-webpack-plugin');
// path是node的一个模块

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),//__dirname是当前目录的绝对路径
        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',
                ],
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192,
                            name: 'images/[name].[hash:8].[ext]'
                        },
                    },
                ],
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ],
    },
    resolve: {
        extensions: ['.js', '.css', '.vue'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
        }
    },
    plugins: [
        new webpack.BannerPlugin('最终版权归JSW79所有'),
        new HtmlWebpackPlugin({
            template: 'index.html'
        }),
    ],
}

第三步：配置package.json，修改默认打开的配置文件

"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --config ./build/dev.config.js"

第四步，修改默认输出位置

之前的输出是因为config.js和dist文件夹在同一级目录，所以设置为./dist

现在dist在上一级目录，所以需要../dist

entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, '../dist'),//__dirname是当前目录的绝对路径
        filename: 'bundle.js',
    },
posted @ 2021-09-10 22:07  JSW79  阅读(49)  评论(0)  编辑  收藏  举报
隐藏目录