上一篇

webpack - 掘金 (juejin.cn)

基本使用

配置预览页面

将index.html放到根目录下

控制台输入：npm install html-webpack-plugin -D

在webpack.config.js中，添加如下配置：

const path = require('path')

// 导入生成预览页面的插件，得到一个构造函数，添加配置如下
const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({// 创建插件的实例对象
  template:'./src/index.html', // 指定要用到的模板文件
  filename:'index.html' // 指定生成的文件名称，该文件存在于内存，在目录中不显示
})

module.exports = {
    // 编译模式
    mode:'development', // development production
    // 指定入口路径
    entry: path.join(__dirname,'./src/index.js'),//__dirname表示当前文件所处的目录
    // 
    output:{
        path:path.join(__dirname,'./dist'),//指定输出文件路径
        filename:'bundle.js' // 输出文件名称 
    },
    devServer: {
      static: "./",
    },
    plugins:[htmlPlugin] //plugins数组webpack打包期间会用到插件列表
}

启动项目

此时根目录下即可访问：

自动打包参数

自动启动浏览器：--open

加载器

webpack默认只能打包以.js后缀结尾的模块，其他非.js后缀结尾的模块，只能调用loader加载器才可以正常打包，否则会报错

打包css文件

环境搭建

创建1.css

index.js中引入1.css文件

加载器配置

控制台输入：npm i style-loader css-loader -D

在webpack.config.js中添加：

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

样式修改成功

打包处理less

环境搭建

创建1.less文件

在insex.js中引入1.less

控制台输入：npm i less-loader less -D

在webpack.config.js中添加配置

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

样式添加成功

打包处理scss

环境搭建

创建1.scss

在insex.js中引入1.scss

控制台输入：npm i sass-loader node-sass -D

在webpack.config.js中添加配置

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

样式添加成功

配置postCSS 自动添加兼容前缀

控制台输入：npm i postcss-loader autoprefixer -D

创建postcss.config.js文件，并添加如下配置：

const autoprefixer = require('autoprefixer')

module.exports={
    plugins:[autoprefixer]
}

在webpack.config.js中添加'postcss-loader'

打包样式表中的图片和字体文件

控制台输入：npm i url-loader file-loader -D

webpack.config.js添加如下代码:

{
        test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, //对图片的大小做限制，8kb
              esModule:false
            }
          }
        ],
        type:'javascript/auto'
      }

添加后可以正常显示图片

处理js文件中的高级语法

控制台输入：npm i babel-loader @babel/core @babel/runtime -D

npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

创建babel.config.js，并添加如下代码

module.exports = {
    presets:['@babel/preset-env'],
    plugins:['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
}

在webpack.config.js中添加如下代码

此时高级语法可用