webpack的基本使用

创建项目

1.先确认电脑中是否安装了node

在cmd命令行中输出node -v

2.安装webpack

• npm install --g webpcak或者cnpm install -g webpack (使用cnpm需要先安装淘宝镜像 ）
• 安装淘宝镜像（npm install -g cnpm -registry=https://registry.npm.taobao.org）

3.创建项目

初始化项目

在项目目录下执行 npm init 配置好项目

• 安装webpack 三件套（webpack, webpack-cli, webpack-dev-server）
  在cmd命令行中执行npm i webpack webpack-cli webpack-dev-server-d

通过vscode打开文件夹，在文件夹下面创建一个webpack.config.js的文件，

webpack.config.js

webpack4个核心概念

基本配置项	作用
entry	入口，指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
output	出口，output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
loader	loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
plugins	插件，使webpack具有更多的功能

webpack的基本配置`

const {resolve} = require("path");//引用node中的path模块

module.exports =  {
  mode: "development", 
  // 模式声明：production(生产模式)|development(开发模式)| none
  entry: {
    main: resolve(__dirname, "src/main.js"), 
    index: resolve(__dirname, "src/index.js")
    },
  /* 
  当多入口时可以使用数组或者对象
  */
  output:{
    path:resolve(__dirname,"dist"),//输出文件的路径
    filename :"[id].[hash:5].js"//输出文件的名称 [hash:5] 是在生成文件中加上5位hash数 默认长度是20位
  },
  module:{
    rules:[
      {
        test:/\jsx?$/,//匹配js 或者jsx文件
        loader:"babel-loader"//需要加载相应的文件，就使用相应的loader 
        // babel-loader 能将es6语法转义成相应的es5语法以及相应浏览器兼容性
      }
    ]
  }
}

4. loader的使用

webpack中babel-loader的基本使用

1. 安装babel-loader （npm install --save-dev babel-loader @babel/core）
2. 安装转换 ES2015+ 的 env preset （npm install @babel/preset-env --save-dev）
3. 在babel-loader中配置preset

{
        test:/\jsx?$/,//匹配js 或者jsx文件
        loader:"babel-loader",//需要加载相应的文件，就使用相应的loader 
        // babel-loader 能将es6语法转义成相应的es5语法 
         options: {
           presets: [
             ['@babel/preset-env', {
               targets: {
                 browsers: "> .25%"
               }
             }]
           ]
         }
      }
  

webpack中css加载的基本使用

1. 安装css-loader style-loader
2. 当项目中使用了css预编译则安装相应的loader
3. 注意：loader的执行是从下向上执行，从左向右执行

 {
        test:/\.less$/,
        use: ["style-loader", "css-loader", "less-loader"]
        // less-loader 将less处理成css后交给css-loader css-loader解析css源代码以及@import 和url()中加载的资源最后交给
        // style-loader style-loader通过style标签将css加入到html中
      }

webpack中静态资源的基本使用

1. 安装url-loader file-loader （npm i url-loader file-loader -d）
2. 配置loader

//配置
 {
        test:/\.(jpg|png|gif)$/,
        loader:"url-loader",
        options:{
          limit:8*1024//当图片小于8kb则使用base64处理图片减少http请求
        }
      }

注意 file-loader 和url-loader不能处理HTML中的图片资源

webpack中html中图片的处理

1. 安装html-loader（npm i html-loader -d）
2. 配置loader

 {
        test:/\.html$/,
        loader:"html-loader"
      }

webpack的基本使用就这些了
完整的配置

const {
  resolve
} = require("path");
const HtmlWebackPlugin = require("html-webpack-plugin")
module.exports = {
  mode: "development",
  entry: {
    index: resolve(__dirname, "./src/index.js")
  },
  output: {
    publicPath: './',
    path: resolve(__dirname, "./dist/js"),
    filename: "[name].[hash:4].js",
  },
  module: {
    rules: [{
        test: /\.js$/,
        exclude: resolve(__dirname, "node_modules"),
        loader: "babel-loader"
      },
      {
        test: /\.less/,
        use: [{
            loader: "style-loader",
          },
          {
            loader: "css-loader",
          },
          {
            loader: "less-loader",
          }
        ]
      },
      {
        test:/\.(jpg|png|gif)$/,
        loader:"url-loader",
        options:{
          limit:8*1024,//当图片小于8kb则使用base64处理图片减少http请求
          esMoule:false//关闭url-loader中的es6模块化，改使用commonjs解析
        }
      },
      {
        test:/\.html$/,
        loader:"html-loader"
      }
    ]
  },
  plugins: [
    new HtmlWebackPlugin({
      template: resolve(__dirname, "./src/index.html"),
    })
  ]
}