webpack基本使用

webpack基本使用

webpack是一款模块化打包工具，是基于配置的，通过配置一些选项来让webpack执行打包任务

gulp 与 webpack 的异同

相同点：都是前端的自动化构建工具

不同点：

gulp：强调工作流程，侧重于前端开发的 整个过程 的控制管理，是基于流的自动化构建工具，通过task（）与pipe（）实现不同的功能

webpack：是前端模块化开发的解决方案，强调模块化，通过loader（加载器）和plugins（插件）对资源进行处理的

如何使用webpack进行打包

全局下载webpack依赖

npm i webpack -g
npm i webpack-cli -g
npm i yarn -g

创建webpack目录

1. 创建webpack.config.js文件
2. yarn初始化
3. 使用用yarn局部安装webpack依赖

yarn init -y
yarn add webpack webpack-cli

配置entry(入口)与output(出口)

单入口 、单出口

const path = require('path')
// 导出配置
module.exports = {
  // 指明打包的入口文件
  entry: './src/qf.js',
  // 指明打包的出口文件
  output: {
    path: path.resolve(__dirname, 'dist'),//路径解析
    filename: 'main.js'
  }
}

多入口 、单出口

entry:['./src/qf.js','./src/about.js']

多入口、 多出口

entry: {
	qf: './src/qf.js',
  about: './src/about.js'
},
output: {
   path: path.resolve(__dirname, 'dist'),
   //name：根据入口文件的key值命名，如qf、about
   //hash：每次修改文件打包生成新的文件，包括没被修改的文件
   //chunkhash：只打包被修改过的文件
   //8：表示生成哈希值的位数
   filename: '[name].[chunkhash:8].js'
}

将webpack配置文件放入scripts目录下，添加指令到package.json

package.json

"scripts": {
    "build": "webpack --mode production --config scripts/webpack.config.js"
  },

压缩文件默认生成在于配置文件同一个目录，所以需要修改生成的压缩文件路径到根目录

scripts/webpack.config.js

output: {
    // path: path.resolve(__dirname, '../dist'),
    // __dirname是被执行文件所在的文件夹目录
    // process.cwd()是指当前node命令执行所在的文件目录
    path: path.resolve(process.cwd(), 'dist'),
    filename: 'js/[name].[chunkhash:8].js'
  }

plugins（插件）

html-webpack-plugin

• 为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题
• 可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

下载模块

yarn add html-webpack-plugin -D

scripts/webpack.config.js

 plugins: [
    new HtmlWebpackPlugin({
      title: "react-app",// 需要再模板文件title出修改
      template: "public/index.html",// 指定模板
      filename: "aaa.html"
    })
  ]

public/index.html

<title><%= htmlWebpackPlugin.options.title %>title>

webpack-dev-server

是webpack官方提供的一个小型Express服务器

• 为静态文件提供服务
• 自动刷新和热替换(HMR)

下载依赖模块

yarn add html-webpack-plugin -D

修改文件

package.json

"scripts": {
    "build": "webpack --mode production --config scripts/webpack.config.js",
    "dev": "webpack-dev-server --mode development --config scripts/webpack.config.js"
  },

style-loader与 css-loader

css-loader：可以将引入到js中的css代码给抽离出来

style-loader：可以将抽离出来的css代码放入到style标签中

下载依赖模块

yarn add style-loader css-loader -D

scripts/webpack.config.js

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

注意：webpack中loader的使用是从后往前的

另外，js文件需要引入css文件

// import './index.scss' 两种都可以
require('./index.scss')

node-sass与sass-loader

用来处理转换sass或是scss文件

下载依赖模块

yarn add node-sass sass-loader -D

这里可能遇到 node-sass 下载失败的问题，通过以下两步即可解决

1. 更改镜像源

   yarn config set registry https://registry.npm.taobao.org -g
   

2. 配置node-sass的二进制包镜像地址

   yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
   

再次下载即可成功

scripts/webpack.config.js

{
  	test: /\.s[ac]ss$/i,
    use: ['style-loader', 'css-loader', 'sass-loader']
},

mini-css-extract-plugin

用来提取css文件为外联样式

下载依赖模块

yarn add mini-css-extract-plugin -D

引入并使用

scripts/webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
 plugins: [
    ...
    new MiniCssExtractPlugin({
      filename: 'css/[name].[chunkhash:8].css'
    })
  ],
   module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
    ],

postcss-loader与autoprefixer

用来处理css浏览器兼容问题，添加前缀

下载依赖模块

yarn add postcss-loader autoprefixer -D

在项目根目录创建postcss.config.js文件

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

修改scripts/webpack.config.js配置文件

module: {
  rules: [
    {
      test: /\.css$/i,
      use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
    },
    {
      test: /\.s[ac]ss$/i,
      use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader', 'sass-loader']
    },
  ],
},

修改package.json配置文件

 "browserslist": [
    "cover 99.5%"
  ]

file-loader

处理图片

下载依赖模块

yarn add file-loader -D

修改scripts/webpack.config.js配置文件

module: {
    rules: [
      。。。
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[ext]',//outputPath: 'images'
              publicPath: '/'
            },
          },
        ],
      },
    ],

url-loader

第二种处理图片的依赖

如果图片大于指定的limit，其内部依然会按照file-loader处理

如果图片小于指定的limit，图片就会转成base64位，减少HTTP请求

下载依赖模块

yarn add url-loader -D

修改scripts/webpack.config.js配置文件

		{
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,// 限制图片字节大小
              name: 'images/[name].[ext]',
              publicPath: '/'
            },
          },
        ],
      },

copy-webpack-plugin

用于不想被webpack处理的文件，原封不动的拷贝过去

下载依赖模块

yarn add copy-webpack-plugin -D

修改scripts/webpack.config.js配置文件

const CopyPlugin = require('copy-webpack-plugin')

 plugins: [
   。。。
    new CopyPlugin({
      patterns: [
        { 
          from: path.resolve(process.cwd(), 'src/static/'), 
          to: path.resolve(process.cwd(), 'dist/static/')
        },
      ],
    }),
  ],

处理es6

下载依赖模块

yarn add [email protected] [email protected] [email protected] [email protected] [email protected] -D

yarn add  babel-preset-stage-0

支持react

下载依赖模块

yarn add react react-dom -S

服务器配置

devServer: {
    open: true,// 自动打开页面
    port: 9000,// 开启端口号
     proxy: {		// 代理
       "/api": {
         target: "http://localhost:3000",
         pathRewrite: {"^/api" : ""}
       }
     }
  }

---

以上，通过webpack可以实现，由零开始搭建的最基础的react项目~