webpack学习记录

webpack

• webpack是一个模块打包工具
• webpack.config.js为配置文件

下载

• npm install webpack webpack-cli
• webpack-cli的作用就是可以在命令行下使用webpack的命令

npx

• 调用项目中安装的模块

命令

• 设置配置文件

  npx webpack --config webpack.config.js

• 在命令行下打包

  npx webpack index.js 在没有配置文件的情况下需要指定人口文件进行打包

• 使用快捷命令，npm run bundle

  在package.json中的script进行配置

  "scripts": {
      "bundle": "webpack"
   }
  

配置项

• entry

  {
      // 入口文件
      main: './index.js'
  }
  

• output

  {
      // 打包后的js文件
  	filename: 'bundle.js',
      // 路径, 需要使用path的resolve转化为绝对路径
      path: path.resolve(__dirname, "dist")
  }
  

• mode

  development 开发模式，代码不会被压缩

  production 生产模式，代码会被压缩，默认为生产模式，不带这个参数但是会报错

loader

• 处理非js文件的预处理器，可以打包非js的静态文件

• 如果有非js文件的，需要指定规则，告诉webpack需要加载什么loader去处理

• 从下到上加载loader

  file-loader

  module: {
      result: [{
          以.png结尾的文件
          test: /\.png$/,
          use: {
          	// 将文件发送到输出文件夹，并返回（相对）URL
          	loader: 'file-loader'
      	}
      }]
    }
  

url-loader

• 可以将文件打包成base64格式进js文件中
• url-loader可以实现file-loader的功能

参数

rules: [{
test: /\.(png|jpg|gif)$/,
use: {
    loader: 'url-loader',
        // 配置项
        options: {
            // [placehold] 占位符
            // 规定文件名 [文件名].[格式]
            name: '[name]_[hash].[ext]',
            // 打包的路径, 相对于整个打包的路径来说的, 后面需要加上/,否则不起作用
            outputPath: 'images/',
            // 规定文件的大小，如果小于就打包进js文件，大于就打包进指定目录下
            limit: 1024
        }
	}
}]

css-loader, style-loader

• css-loader和style-loader需要在一起使用

• 配置项importloader

  module: {
      rules: [{
          test: '/\.scss$/',
          use: [
              'style-loader',
              {
                  loader: 'css-loader',
                  option: {
                      // 这个参数的作用是当解析一个css文件的时候，css文件里面引入了一个scss文件，解析的顺序是从下往上的，再次解析scss文件的时候，前面的sass-loader就不会解析了，因此这个参数的作用就是让引入的文件全部从最开始进行解析
                      importLoaders: 2,
                      // 以模块块的形式引入css，就不会造成css样式的冲突
                      modules: true
                  }
              },
              'sass-loader',
              'postcss-loader'
          ]
      }]
  }
  

  import style from './avatar.scss'
  
  img.classList.add(style.avatar)
  

sass-loader

• sass-loader要与css-loader和style-loader一起使用
  

postcss-loader

• 将css转化为其他浏览器所兼容的版本

  使用需要下载postcss-loader, autoprefixer为postcss-loader的一个插件

  npm install autoprefixer -D

  创建一个postcss.config.js的文件引入这个插件

  module.exports = {
      plugins: [
          // 后面还要加上这么一句话
          require('autoprefixer')({browsers:['>0.15% in CN']})
      ]
  }
  

plugin

HtmlWebpackPlugin

HtmlWebpackPlugin在打包之后回自动生成一个html文件，并且将打包后的js文件自动引入到html文件中

• 参数

  template可以指定文件的模板来进行构建

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

CleanWebpackPlugin

在打包之前移除之前的打包文件，可以节省资源

const { CleanWebpackPlugin } = require('clean-webpck-plugin')
plugins: [
	new CleanWebpackPlugin()
]

• 参考

  cleanwebpackplugin 地址

使用

打包字体文件

//webpack.config.js
const path = require('path')

module.export = {
    entry: {
        main: '../src/index.js'
    },
    output: {
        filename: bundle.js,
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: '/\.(eot|woff|ttf|svg)/',
            use: {
                loader: 'file-loader',
                option: {
                    outputPath: 'font/'
                }
            }
        }]
    }
}

注意

• 总是会出现，loader安装之后，添加rule，打包出现错误，解决方法之一，删除node_module，使用cnpm或者npm重新安装, 不要使用cnpm install后又使用npm install，模块执行会出现问题

• 如果出现Replace Autoprefixer browsers option to Browserslist config. Use browserslis的错误

  module.exports = {
      plugins: [
          require('autoprefixer')({
              overrideBrowserslist: [
                  "Android 4.1",
                  "ios 7.1",
                  "Chrome > 31",
                  "ff >31",
                  "ie >= 8"
              ],
              grid: true
          })
      ]
  }
  

  参考文章
  webpack出现browserlist的问题解决