Webpack基本使用 - 淡定的博客

Webpack介绍:主要用于web项目中打包资源进行自动构建,Webpack将所有资源视为JS的模块来进行构建，所以对于CSS，Image等非JS类型的文件，Webpack会使用相应的加载(loader)器来加载成其可识别的JS模块资源,通过配置一些信息，就能将资源进行打包构建，更好地实现前端的工程化

Webpack安装

本地安装:

npm install -D webpack
-D 实际上是简写  --dev-save

如果你使用Webpack 4+ 版本, 你还需要安装CLI.

npm install -D webpack-cli

要安装特定版本

npm install -D webpack@<version>

全局安装:

npm install -g webpack

配置项简介：

Entry，入口文件配置,Webpack执行构建的第一步将从entry开始,完成整个工程的打包
Module，模块,在Webpack里,一切皆模块,Webpack会从配置的entry开始递归找出所有依赖的模块,最常用的是rules配置项,功能是匹配对应的后缀,从而针对代码文件完成格式转换和压缩合并等指定的操作.
Loader，模块转换器,用于把模块原内容按照需求转换成新内容,这个是配合Module模块中的rules中的配置项来使用.
Plugins，扩展插件,在Webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的事情.(插件API)
Output，输出结果,在Webpack经过一系列处理并得出最终想要的代码后输出结果,配置项用于指定输出文件夹,默认是./dist

基本使用

把src的代码编译到dist目录中

project

  handle
  |- package.json
  |- webpack.config.js
  |- index.html
  |- /src
    |- index.js
    |- mixin.js
  |- /dist
    |- bundle.js

src/index.js

import  content  from "./mixin";
document.body.appendChild(content("webpack"));

src/mixin.js

module.exports = function (con) {
  var element = document.createElement('div');

  element.innerHTML = 'Hello, ' + con;
  return element;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>起步</title>
</head>
<body>
   <script src="./dist/bundle.js"></script>
</body>
</html>

.npmrc

registry=https://registry.npm.taobao.org

webpack.config.js

const path = require('path');

module.exports = {
  // 打包的入口点
  entry: './src/index.js',
  // 打包的输出点
  output: {
      // 打包之后输出文件的名称
    filename: 'bundle.js',
      // 打包之后输出文件的路径
    path: path.resolve(__dirname, 'dist')
  }
}

总结

webpack 的基本使用方式 :

配置package.json的start命令为webpack
创建webpack.config.js
指定项目打包的入口
指定项目打包后文件的名称和输出路径

配置代码错误源

如果报错了，是这样子的：

我们需要知道代码的具体错误,如图：

修改配置文件：

webpack.config.js

devtool: 'inline-source-map',
<!--去掉警告提示-->
mode: 'none'

webpack加载CSS

下载包

npm install -D style-loader css-loader

引入资源

src/js/index.js

// 引入css
import '../css/main.css'

修改配置文件

webpack.config.js

  module: {
    rules: [
      // 加载css
      {
        // 找到css文件()
        test: /\.css$/,
        // 需要转换器(需要什么转换器 都是大家都知道的 style-loader css-loader)
        use: ['style-loader', 'css-loader']
      },
    ]
  }

webpack加载图片

下载包

npm install -D file-loader

引入资源

src/js/index.js

// 引入图片
const imgSrc = require('../image/chrome.png');

修改配置文件

webpack.config.js

    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: ['file-loader']
      }
    ]

webpack加载字体

下载字体
定义字体

@font-face {
  font-family: 'wanlum';
  src: url("../fonts/Raleway.ttf");
}

使用字体

div {
  font-family: 'wanlum';
  color: red;
  font-size: 30px;
}

配置webpack.config.js

{
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          'file-loader'
        ]
}

webpack编译ES6

下载包

npm install -D babel-cli babel-preset-env babel-loader

编辑配置文件 .babelrc

{
  "presets": [
    "env"
  ]
}

配置webpack.config.js

 {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
    }

less编译成css

下载包

npm install less-loader less -D

配置webpack.config.js

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

html自动生成

下载包

npm install -D html-webpack-plugin clean-webpack-plugin

引入包

// 重新生成html的
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 清理dist目录
const CleanWebpackPlugin = require('clean-webpack-plugin');

配置webpack.config.js

  plugins: [
    new HtmlWebpackPlugin({
      title: "你好"
    }),
    // 清理dist目录
    new CleanWebpackPlugin(['dist'])
  ],

自动编译实时加载

下载包

npm install -D webpack-dev-server

配置webpack.config.js

devServer: {
    contentBase: './dist'
}

配置package.json启动项

"start": "webpack-dev-server --config webpack.config.js"

热替换(跟自动编译实时加载功能差不多)

配置webpack.config.js

  plugins: [
    new HtmlWebpackPlugin({
      title: '使用HtmlWebpackPlugin'
    }),
     new webpack.NamedModulesPlugin(['dist']),
      new webpack.HotModuleReplacementPlugin(['dist'])
  ],
   devServer: {
     contentBase: path.resolve(__dirname,'dist'),
     hot: true
   }