Webpack基础

作用

前端静态文件的打包工具：

1. 功能：将多个静态文件（js,css）打包成一个文件。
2. 使用场景：在部署前将项目打包
3. 优点：防止用户多次请求静态资源界面。

安装

• npm install -g webpack webpack-cli 安装webpack 和 webpack-cli
• webpack -v 查看版本

配置文件

• 在要打包的文件夹同级目录下创建webpack.config.js 文件，文件内容如下

  1 2 3 4 5 6 7 8

  const path = require("path"); //Node.js内置模块 module.exports = { entry: './src/main.js', //配置入口文件 output: { path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径 filename: 'bundle.js' //输出文件 } }

打包命令

• webpack 直接在配置文件所在目录执行该命令进行打包
• webpack —mode=development 开发模式打包（打包后带有缩进）
• webpack —mode=production 生产环境打包（打包后没有缩进）
• 注意事项：打包时.js后缀可以省略，.css后缀不能省略

安装loader插件

• npm install —save-dev style-loader css-loader 安装 style-loader 和 css-loader

  注：

  • style-loader：让 javascript 认识css
  • css-loader： 将 css 装载到 javascript

修改配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './src/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: 'bundle.js' //输出文件
    },
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

• ← Previous Post
• Next Post →

...

...

00:00

00:00