webpack环境的入门和环境搭建

首先初始化package.json

输入指令:

npm init

一路按回车即可，后续可在package.json里面修改

安装webpack到本项目

输入指令:
npm install webpack webpack-cli -g   全局安装
npm install webpack webpack-cli -D  局部安装  

推荐【npm install webpack webpack-cli -D】命令（安装到本项目），当然也可以安装到全局( npm i -g webpack )，多个项目公用一个Webpack。

使用Loader

引入非js文件需要安装Loader

npm i -D style-loader css-loader less-loader

使用Loader加载的css是打包到js里面的，然后动态的向head插入style标签的方式。

使用Plugin

通过extract-text-webpack-plugin 插件把注入到js的文件单独提取到一个css文件。

npm i -D extract-text-webpack-plugin 

通过html-webpack-plugin 插件复制’./src/index.html’ 文件，并自动引入打包输出的所有资源（JS/CSS）。

npm install --save-dev html-webpack-plugin

注意： 使用html-webpack-plugin后，源文件不要再引入打包后的资源文件了，要不然编辑报错 ，具体分析见：https://blog.csdn.net/daodaoke/article/details/107370795

使用DevServer

1. 提供HTTP服务，默认占用8080端口，需要先安装webpack-dev-server

npm i -D webpack-dev-server 

2. 监听文件变化自动刷新

/** 默认关闭，可用下面配置在启动的时候开启监听 **/
webpack-dev-server --watch

3. 模块热替换

/** 模块热替换默认关闭，可用下面配置在启动的时候开启监听 **/
webpack-dev-server --hot

4. 支持Source Map

/** Source Map默认关闭，可用下面配置在启动的时候开启监听 **/
webpack-dev-server --devtool source-map

webpack.config.js 的基本内容

webpack必须指定一些配置才能完成打包

const { resolve } = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'js/bundle.js',
        path: resolve(__dirname, 'dist'),
    },
    //设置开发者工具的端口号,不设置则默认为8080端口
    devServer: {
        contentBase:resolve(__dirname, 'dist'),
        inline: true,
        port: 8888,
        compress:true,
        hot:true,
        open:true
    },
    module: {
        rules: [
          {
            // 处理 less 资源
            test: /\.less$/,
            use: ['style-loader', 'css-loader','less-loader'],
          },{
            // 处理 css 资源
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
          },{
            // 处理 图片 资源
            test: /\.(jpg|png)$/,
            loader: 'url-loader',
            options:{
              limit: 8 * 1024,
              name:'[hash:10].[ext]',
              esModule:false,
              outputPath:'images'
            }
          },{
            // 处理html里面的 图片 文件
            test: /\.html$/,
            loader: 'html-loader',
          },{
            // 处理其他资源,排除上面的
            exclude: /\.(html|js|css|less|jpg|png)$/,
            loader: 'file-loader',
            options:{
              name:'[hash:10].[ext]',
              outputPath:'font'
            }
          }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
          template:'./src/index.html' //指定模板
        })
    ],
    mode:'development' //开发者模式
}

其他注意事项

webpack只是打包，当我们需要打包且输出实体文件的时候，可以直接执行

webpack --mode development

一般情况，调试的时候，可以直接用webpack-dev-server启动即可，打包在内存中，不会输出实体文件

webpack-dev-server