webpack 快速入门

webpack 作用： 转译es6到es5,压缩混淆代码

1. 先确保电脑上装了node，通过node -v判断
2. 然后通过npm init -y 创建一个package.json文件
3. 通过npm install webpack webpack-cli --save-dev安装webpack
4. 创建src/index.js,写入一些简单内容
5. 如果想让webpck处理index.js, 创建webpack.config.js
6. 在webpack.config.js写如下代码,写完后可以用npx webpack命令打包

const path = require('path')

// commonJs语法
module.exports = {
    // 模式：开发模式
    mode： 'development',
    // 打包的入口文件
    entry: path.join(__dirname, 'src', 'index.js')
    // 出口文件
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    } 
}

7. 为了使用npm run build的方式打包，可以在package.json中添加如下代码：

"scripts": {
    "build": "webpack"
}

8. 测试 在dist中创建 index.html,引入dist中的bundle.js

9. 为了像打包js一样打包html，需要使用HtmlWebpackPlugin， （可以先删除dist文件），通过npm install html-webpack-plugin --save-dev安装

10. 在webpack.config.js中配置， 就会在dist中自动生成index.html,并引入相应的js

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            // 入口模板文件
            template: path.join(__dirname, 'src', 'index.html'),
            // 出口文件名称
            filename: 'index.html'
        })
    ]
}

11. 为了让代码改动后能自动打包,自动更新（热更新），(也就是像vue一样运行npm run dev)需要配置webpack-dev-server（虽然没有生成dist文件，却可以正常运行，原因：webpack-dev-server会把打包后的文件放到内存里面，不需要生成真正的文件） 安装： npm install webpack-dev-server --save-dev

配置： 在webpack.config.js中

module.exports = {
    devServer: {
        // 端口
        port: 8000,
        // 要使用的静态资源文件
        static：path.join(__dirname, 'dist'),
    }
}

在package.json 中

"scripts": {
    "build": "webpack",
    "dev": "webpack-dev-server"
}

启动： npm run dev

12. es6代码编译 安装：npm install @babel/core @babel/preset-env babel-loader --save-dev

定义babel的配置文件：1 创建.babelrc文件 2在文件中写入：

{
    //预设： babel一系列插件的集合
    "presets": ["@babel/preset-dev"]
}

在webpack.config.js中

// 当遇到.js文件时，使用babel-loader编译，处理include中的代码，排除exclude中的代码
module.exports = {
   module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    },
}

13.在此附上webpack.config.js代码

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                include: path.join(__dirname, 'src'),
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'src', 'index.html'),
            filename: 'index.html'
        })
    ],
    devServer: {
        port: 8000,
        static: path.join(__dirname, 'dist')
    },
}