webpack

webpack的安装及其使用

一、安装

安装webpack之前必须要安装nodejs，而且nodejs必须为最新的版本，要不然可能会有一个些问题。接下来就要全局的安装webpack，可以使用yarn或者npm包管理器，这里我们使用npm管理器。

npm i webpack -g（全局安装webpack）
npm i –save-dev webpack@（版本号）（如果没有全局安装webpck，则这条语句就会报错）
npm i -D webpack-dev-server（安装webpack热更新）
npm i -D css-loader（此处只是举一个例子，并不一定非要是css-loader也有可能是别的loader）
npm i -D webpack-cli -g（全局安装webpack-cli）

二、使用

首先第一步要初始化npm Init -y（生成package.json）
利用npm安装webpack
- 安装webpack-cli和webpack-dev-server（可以去pakeage.json的文件中确定是否安装该依赖）
- 创建一个webpack.config.js的文件
接下来就是配置webpack.config.js文件

javascript

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
  // 设置以开发者模式
  mode: 'development',
  //设置一个入口的文件
  entry: './src/index.js',
    //出口文件的名称和路径，并把出口文件都放在dist文件夹，这个文件如果没有则会创建
  output: {
    filename : 'bundle.js',
    // 在当前的路径下创建一个dist文件夹，并把出口文件生成一个前面为任意8为哈希值-bundle.js
    path: path.join(__dirname,'dist')
  },
    //配置热更新
  devServer: {
    contentBase: './dist',
    hot: true,
    port: 3000
  },
    //可以加载css和图片还有html文件
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.(htm|html)/,
        use: ['html-withimg-loader','raw-loader']
      },
      {
        test: /\.(png|jpeg|gif|webp|jpg)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  },
    //配置模板，在index.html中会使用模板来应用title
  plugins: [
    new HtmlWebpackPlugin({
      title: 'hello webpack',
      filename: 'index.html',
      template: './src/index.html'
    })
  ]
};

index.js文件中（入口文件）

javascript

import './style.css'
import './index.html'
console.log('hello webpack2')

三、补充

webpack4会把src的.js文件打包生成一个dist文件夹，并且新增了mode属性,可以指定我们的为生产或者开发模式

Code

mode: 'development/production'

entry可以为一个对象（键值对的形式），指定多个入口文件。
可以用[key]为上面的key

四、loaders

url-loader

url-loader（如果图片的大小小于limit则会压缩为base64，大于的会变成普通的物理文件）基于file-loader

javascript

module: {
    rules: [{
      test: /\.(png|jpg|gif)$/i,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 28192
          }
        }
      ]
    }
    ]
  },

sass-loader

利用sass-loader可以把scss转换为css代码并且打包到js文件中，但是这样并不好，可以利用Plugins把css抽离出来