1. webpack快速入门

1.1. 开始

初始化一个项目,生成一个package.json

npm init

创建src文件，作为项目源码文件夹，在src下创建main.js文件作为项目入口文件

创建build文件，在该文件夹下创建config.js作为webpack的配置文件

---

1.2. 安装

webpack是nodejs的一个模块，因此可以使用npm快速安装

npm install webapck -D

安装webpack-dev-server，为了启动开发服务器

npm install webpack-dev-server -D

安装 babel-core,babel的核心功能

npm install babel-core -D

安装babel-loader@7,webpack的loader插件

npm install babel-loader@7 -D

安装babel-preset-stage-2,安装babel转码规则

npm install babel-preset-stage-2 -D

安装css-loader,可以加载css

npm install css-loader -D

安装style-loader,把css作为style标签插入页面

npm install style-loader -D

安装html-webpack-plugin,可以自动把打包好的文件引入html页面；

npm install html-webpack-plugin -D

大概安装一些我们需要的插件之后，我们大概来配置一些内容来看一看webpack是如何工作的。后边如果需要别的功能还可以继续安装。

---

1.3. 配置

现在可以在build/config.js中添加一些内容来进行配置了，看下边的配置：

const path = require('path');

const HtmlWebpackPlugin = require('heml-webpack-plugin');//引入插件

module.exports = {

    entry:path.join(__dirname,'./src/main.js');//设置打包入口文件

    output:{//设置输出

        path:path.join(__dirname,'./dist'),//输出路径

        filename:'[name].js'//输出文件名

    },

    module:{//配置各种loader

        rules:[//配置loader规则

            { //针对不同类型文件的loader都是一个对象

                test:/\.js$/,//一个正则表示对所有的js文件有效

                use:['babel-loader']//针对这类文件所使用的loader,表示所有的js文件都会使用babel-loader进行转码

                include:[],//包含的目录列表

                exclude:[],//不包含的目录列表

            },

            {

                test:/\.css$/,

                use:['style-loader','css-loader]

            }

        ]

    },

    resolve:{//关于模块引入的一些选项

        modules:[//设置查找模块的目录

            'node_modules'

        ],

        extensions:['.js','.json','.vue','.css'],//默认添加的后缀名

        alias:{//起别名

            '@':path.join(__dirname,'./src')

        }

    },

    devserver:{//针对开发服务器的一些配置

        noInfo:true,//不显示打包信息，但是会显示错误和警告

        overlay:{//错误和警告会显示在浏览器的视图上

            warnings:true,

            errors:true

        }

    },

    plugins:[

        new HtmlWebpackPlugin({//使用插件

            template:'./index.html'

        })

    ]

}

在项目根目录中创建.babelrc文件，在该文件中书写：

{

    "presets":["stage-2"]

}

---

1.4. 启动

在package.json中的script属性中添加如下命令

"dev":"webpack-dev-server --config ./build/config.js --mode development --open --inline",

"build":"webpack --config ./build/config.js --mode production"

打开命令行，定位到到当前项目根目录下执行

启动开发服务器

npm run dev

打包项目并生成文件dist/main.js

npm run build