如何使用webpack搭建环境

如何使用webpack搭建环境

查看淘宝镜像是否更改过来：
npm config list回车进行查看

1.创建项目目录并初始化package.json

默认创建package.json文件
通过npm init -y

2.安装webpack和webpack-cli

npm install webpack webpack-cli --save-dev
简写：npm i webpack webpack-cli -D

3.运行webpack测试

CommonJS规范：基于服务端模块化规范，node产出
抛出：modules.exports
引入：require
ES6 module:
import xxx from ''
export default {}

4.webpack支持的文件类型

默认只支持JS和json文件的引入
**注意：**如果在JS中要引入其他文件类型：.css,.png,字体文件或其他做任意文件类型，解析时都需求安装合适的loader来进行解析处理

5.webpack配置文件

默认配置文件名：webpack.config.js
如果想运行其他配置文件
webpack --config webpack.dev.config.js

配置文件是webpack的核心，所有的loader和插件环境，运行环境配置都在配置文件中配置使用

例如：
//引入webpack,主要用于对webpack内置插件调用时使用
const webpack = require('webpack')
//引入path，对路径进行处理
const path = require('path')

//创建一个配置对象
const config = {
    //配置入口
    entry: './src/main.js',
    //配置出口
    output: {
        //出口路径
        path:path.resolve(__dirname,'dist'),
        //出口文件名
        filename:'bundle.js'
    }

}

module.exports = config;

6.配置各种loader(文件解析器)

解析css的loader
解析图片 file-loader,url-loader
解析ES6/7/8/9/10..... babel
第一步：npm install --save-dev babel-loader @babel/core @babel/preset-env 
第二步：在项目根目录下创建一个.babelrc文件，并写入
{
  "presets": ["@babel/preset-env"]
}
第三步：配置loader
module: {
  rules: [
    { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
  ]
}

7.自动清理文件
npm install clean-webpack-plugin --save-dev

引入
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

使用:

//创建一个配置对象
const config = {
   .....,
    plugins: [
        new CleanWebpackPlugin()
    ]

}

8.自动注入html
npm install --save-dev html-webpack-plugin

//创建一个配置对象
const config = {
    ....,
    plugins: [
        //自动清理
        new CleanWebpackPlugin(),
        //自动注入html
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename:'home.html'
        }),
    ]

}

9.运行环境

webpack-dev-server

配置文件中：
 devServer: {
        contentBase: path.join(__dirname, "dist"),  //监听运行目录
        port: 9999,  //运行端口号
        hot:true  //热更新
    }

10.核心的概念

	入口：entry：指向项目执行的主入口
	出口：output 构建输出的文件路径和文件名
	加载器：loader 转换webpack不识别的文件（资源）类型
	插件：plugins 为了扩展webpack的功能，例如：清理文件，自动注入Html
	模式：mode 切换开发环境(development)还是线上(production)环境