webpack手动配置

webpack版本: 4.29.6
babel版本: 7.4.0

webpack 安装

1. 运行 npm i webpack-cli webpack --save-dev, 安装到项目开发依赖

webpack 配置文件

1. 在项目根目录中创建 webpack.config.js 并打开加入以下内容

    // 处理路径的模块
    var path = require('path');

    // 导出一个配置对象
    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件, 根据自己项目情况写
        output: {
            path: path.resolve(__dirname, 'dist'), // 输出路径, 根据自己项目情况写
            filename: 'bundle.js' // 输出文件名, 根据自己项目情况写
        }
    }

webpack 实时打包

1. 运行 npm i webpack-dev-server --save-dev 安装到开发依赖
2. 在项目根目录下 package.json 文件的 scripts 节点下新增 "dev": "webpack-dev-server" 指令

使用 html-webpack-plugin 插件配置启动页面

html-webpack-plugin 可以整合 webpack 编译生成的静态资源, 自动生成 html 文件

1. 运行 npm i html-webpack-plugin --save-dev 安装到开发依赖
2. 修改 webpack.config.js 配置文件如下:

    var path = require('path');
    // 导入插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), 
        output: { 
            path: path.resolve(__dirname, 'dist'), 
            filename: 'bundle.js' 
        },
        plugins: [ 
            new htmlWebpackPlugin({
                template: path.resolve(__dirname, 'src/index.html'), //模板路径
                filename: 'index.html' // 生成HTML文件名称
            })
        ]
    }

自动打开浏览器、热更新

1. 修改 package.json 的 script 节点如下, --port 3333表示打开的端口号为3333:

"dev": "webpack-dev-server --hot --port 3333 --open"

使用 webpack 打包 css 文件

1. 运行 npm i style-loader css-loader --save-dev
2. 修改 webpack.config.js 这个配置文件:

module: { // 配置第三方loader模块
        rules: [ // 文件匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }

表示用 use 规定的 loader 处理 test 匹配到的文件; loader 模块的调用顺序是从后向前;

使用 webpack 打包 less 文件

1. 运行 npm i less-loader less --save-dev
2. 修改webpack.config.js这个配置文件：

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

使用 webpack 打包 sass 文件

1. 运行 npm i sass-loader node-sass --save-dev
2. 在 webpack.config.js 中添加处理 sass 文件的 loader 模块：

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

使用 webpack 处理 css 中的路径

1. 运行 npm i url-loader file-loader --save-dev
2. 在 webpack.config.js 中添加处理 url 路径的 loader 模块:

file-loader 将文件上的 import/require() 解析为 URL 并将文件发送到输出目录, 经配置可避免重名
url-loader 用于将文件转换成 base64 URIs, 一般用于转换小图标和字体图标

{ test: /\.(png|jpg|gif)$/, use: 'url-loader' }, // 处理小图标
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' } //处理字体图标

1. 可以通过 limit 指定进行base64编码的图片大小; 只有小于指定字节 (byte) 的图片才会进行 base64 编码:

{ test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },

使用 babel 处理高级JS语法

1. 运行 npm i babel-loader @babel/plugin-transform-runtime @babel/core --save-dev 安装babel的相关 loader 包
2. 运行 cnpm i @babel/preset-env --save-dev 安装 babel 转换的语法
3. 在 webpack.config.js 中添加相关loader模块, 注意一定要把 node_modules 文件夹添加到排除项:

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

1. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

{
    "presets":["@babel/preset-env"],
    "plugins":["@babel/plugin-transform-runtime"]
}