开发环境webpack的基本配置

**

下载：

**
$ npm i webpack webpack-cli -g 首先先全局安装
$ npm i webpack webpack-cli -D 本地安装

**

运行指令：

**
1、开发环境：
$ webpack “原入口文件路径” -o “打包到的文件路径” --mode=development
2、生产环境：
$ webpack “原入口文件路径” -o “打包到的文件路径” --mode=production

使用webpack我们如果不进行配置的化只能处理js与json的文件资源，不可以处理css/img等资源
所有我们需要新建一个文件webpack.config,js文件来书写配置文件

在这个配置文件中主要包括入口(entry)，出口(output)，loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
，插件(plugins)，模式 这五个部分组成
**

关于模块化：

**
在所有的配置工具都是基于nodejs，所以我们使用commonjs模块化
在项目中我们使用的是ES6模块化，在webpack.comfig.js配置文件中我们使用的是commonjs模块化

**

使用webpack进行打包编译css样式（less,sass）文件：

**
在webpack.config.js文件中进行配置
//在该文件进行配置

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'built.js'
    },
    module: {
        rules: [
            {   //如果我们需要处理不同的文件，我们需要进行配置不同的loader，在数组中直接添加一个新的元素对象
                test: /\.css$/,
                use: [
                    //由下向上执行
                    'style-loader',
                    'css-loader'
                ]
            }，
            //如果包括less文件我们还需要配置打包编译less文件
            {
                test: /\.less/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'  //同时我们还需要下载less-loader和less
                ]
            }
        ]
    },
    mode: 'development'
}

**

打包html文件：

**
在webpack.config.js文件中的插件部分进行书写配置
首先我们需要进行下载插件
$npm i html-webpack-plugin -D
在配置文件中进行引入：

const HtmlWebpackPlugin = require('html-webpack-plugin')  //返回的是一个构造函数
我们需要在插件模块进行使用：
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins:[
    new HtmlWebpackPlugin({template: './src/index.html'});
]

**

打包图片资源：

**
由于是对不认识的资源进行loader，所以我们的配置文件写在loader配置上
//在module上的rules中进行

{
    test: /\.(png|jpg|gif)/,
    //由于我们只需要一个loader，所以我们就可以直接写
    loader: 'url-loader'，
    //所以我们需要进行下载url-loader和file-loader这两个包
    options: {
        limit:8*1024
    }
}

但是这里存在一定的问题，不可以处理html文件中的图片，所以我们还需要添加一些loader配置
//在module上的rules中进行

{
    test: /\.(png|jpg|gif)/,
    //由于我们只需要一个loader，所以我们就可以直接写
    loader: 'url-loader'，
    //所以我们需要进行下载url-loader和file-loader这两个包
    options: {
        //对图片进行优化
        limit:8*1024，
        esModule:flase
    }
}，
{
    test: /\.html$/,
    loader:html-loader
}

//由于url-loader默认使用的是ES6模块化，html-loader使用的是commonjs模块化，所以
//还存在一定的问题，所以我们还需要对模块化进行统一，关闭url-loader的默认ES6

**

打包其他资源：（字体图标等）

**
所以我们还需要在loader添加一个可以处理其他资源的配置

{
    exclude: /\.(css|js|html|less)/,  //排除我们原来配置完的资源
    loader: 'file-loader',
    options: {
        name；'[hash:10].[ext]'  //由于我们打包完输出的文件名为一长串的哈希数，我们取前10位就好，[ext]代表保留原来的后缀
    }
}

使用webpack输出如果想要输出到指定目录，我们需要再添加一个配置，outputPath: ‘css’,这个目录不需要我能进行创建，再运行文webpack就自动生成了

**

devServer:(进行自动打包，编译，刷新浏览器)

**
注意：devServer是没有输出的，是再我们的内存中进行
由于我们每次进行操作完都需要进行再次打包，比较繁琐，所以我们需要再次在webpack.config.js文件中进行配置，本次配置不属于上面的五个配置，开发服务器，devServer:用来自动化的
下载：
$npm i webpack-dev-server -D
启动服务器：
$npx webpack-dev-server

devServer:{
    contentBase:path.resolve(__dirname,'build')，  //打包输出路径
    compress:true,  //启动gaip压缩
    port:3000, //设置端口号
    open:true   //自动打开浏览器
}