由浅入深 学习webpack(一)

大神勿喷 直接跳过🚗

构建webpack项目

1. 初始化项目

mkdir myWebpack 
cd myWebpack 
npm init -y  // 初始化 执行默认值

2. 安装 webpack 安装成功 后如图 （我是局部安装）

npm i webpack webpack-cli -g  // 全局安装
npm i webpack webpack-cli -D  // 局部安装

3. 在根目录创建 webpack.config.js (也可以放在其他目录， 一般放在根目录)

webpack 核心概念

1. 入口 entry
2. 出口 output
3. loader
4. 插件 plugins
5. 环境模式 可以自定义 开发 测试 。。。 根据实际项目自定义

开整

// webpack.config.js
const path = require('path')

module.exports = {
    // 模式
    mode: 'development', 

    // 入口
    entry: './index.js', // 对应你建立的入口文件

    // 出口
    output: {
        filename: 'js/[name][chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    }

}

• 执行下面这行命令

webpack --config webpack.config.js 

• 或者 在package.json 的 执行 npm run build

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

• 会生成 一个默认的dist文件
  

• 这一步 已经成功了 🚀

• 开头我们讲过webpack的核心概念 但是实际开发中 这样是明显不可以的 我们可能操作多个文件 不同的文件类型 图片 字体 css less scss svg 还有像 vue jsx 这些 都需要通过 webpack 转换 或者 作一些 处理

• 上面那个 命令每执行一次 dist里面的文件 一直在增加 按我们的想法是 每执行一次，都要删除之前的文件， 再生成新的文件 这是我们就可以使用 webpack的中 插件的概念 用一个插件 帮我们解决这个事情

• 添加插件的方式很简单

npm install clean-webpack-plugin -D   // clean-webpack-plugin 删除dist 的文件 

const path = require('path')

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    // 模式
    mode: 'development', 

    // 入口
    entry: './index.js',

    // 出口
    output: {
        filename: 'js/[name][chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },

    // 插件
    plugins: [
        new CleanWebpackPlugin()
    ]

}

• 这样就使用了插件 帮我们解决一个需求
• 上面 我们说过还有其他文件处理 比如 less 或者 转换 js es6 语法 等等 我们可以用loader 来处理

npm install babel-loader @babel/core @babel/preset-env -D

• 创建.babelrc 配置文件

{
  "presets": ["@babel/preset-env"]
}

// webpack.config.js

const path = require('path')

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    // 模式
    mode: 'development', 

    // 入口
    entry: './index.js',

    // 出口
    output: {
        filename: 'js/[name][chunkhash].js',
        path: path.resolve(__dirname, 'dist')
    },

    // loader 
    module: {
        rules: [
            {
                test: /\.js$/, // 正则校验 以js结尾 都要经过loader处理
                exclude: /(node_modules|bower_components)/, // 不要处理的文件
                use: { // 注册loader
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },

    // 插件
    plugins: [
        // new webpack.ProgressPlugin(),
        new CleanWebpackPlugin()
    ]

}

• 以上就是简单认识 webpack的 功能 后续项目开发中 会有好多高级写法 比如 环境的区分 压缩文件 压缩图片 等等 还有热更新 等等