webpack基础知识

//loader
//模块：模块主要是运用各种loader用于对模块的源代码进行转换，将lass、sass、或者es6\TS编译转换为html能识别的css、js等，或者进行一些代码压缩图片等等的处理
//style-loader:
处理css文件中的url()等
npm install style-loader --save-dev@0.23.1
css-loader:
将css插入到页面的style标签
npm install --save-dev css-loader@2.2.2
loaders配置：
修改webpack.config.js中module属性中的配置代码如下：

webpack.config.js的基本配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
//path:Node.js Path模块  表示当前处置文件的目录
//path_resolve:将文件转为绝对路径
//__dirname:nodejs中的全局变量，指向当前文件所在的目录
//入库起点（entry point）指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始，
//进入入口起点后，webpack会找到有哪些模块和库是入口起点（直接和间接）依赖的。
//默认值是./src/index.js，但你可以通过在webpack.config.js中配置entry属性，来指定一个（或多个）不同的入口起点

//单文件入口配置
module.exports={
    //入口文件的配置项
    entry:{
        main:'./src/index.js'
    },
    //出口文件的配置项
    output:{
        path:path.resolve(__dirname,'dist'),//把dist目录变为绝对路径
        filename:'index.js',//main.js输出到dist目录下的文件名称
    },
    //模块，例如解读css.图片如何转换，压缩
    module:{},
    //插件，用于生产模板和各种功能
    plugins:[],
    //配置webpack开发服务功能(安装完webpack=dev-server后，可以在这里做一些配置)

     devServer:{
        contentBase:path.join(__dirname,'dist'),//项目目录
        compress:true,//gzip压缩
        port:9000,//服务端口
        //host:'0.0.0.0',//ip地址
        https:true,//开启https
        open:true,//启动后自动打开浏览器
        proxy:{//代理
            '/api':{//'/api'开头的请求会被代理
                target:'http://localhost:3000',//代理地址
                pathRewrite:{'^/api':''},//替换接口中'/api'字符串
            }
        }
     }
}

//多文件入口配置
//添加多个entry对象，对象key作为最终输出文件名
//修改output的filename为动态获取文件名
// module.exports={
//     //入口文件的配置项
//     entry:{
//         main:'./src/main.js',
//         index:'./src/index.js'
//     },
//     //出口文件的配置项
//     output:{
//         path:path.resolve(__dirname,'dist'),//把dist目录变为绝对路径
//         filename:'[name].js',//main.js输出到dist目录下的文件名称
//     },
//     //模块，例如解读css.图片如何转换，压缩
//     //loaders的配置是修改webpack.config.js中的module属性中的配置
//     //loaders执行顺序是倒序，后缀为.css的文件流会流转到css-loader，依次到style-loader,直至完成这条loaders链
//     module:{
//         /*
//         noParse：过滤不需要解析的文件
//         rules:设置解析规则数组
//         {test:xxx}:匹配特定条件，一般是提供一个正则表达式或正则表达式的数组
//         {include：xxx}：匹配特定条件，一般是提供一个字符串或字符串数组
//         {exclude:xxx}:排除特定条件，一般是提供一个字符串或字符串数组
//         {loader:[xxx]||xxx}:解析需要的loader，一般是提供一个字符串或字符串数组

//         */
//         rules:[
//             {
//                 test:/\.css$/,
//                 use:['style-loader','css-loader']
//             }
//         ]
//     },
//     //插件，用于生产模板和各种功能
//     plugins:[],
//     //配置webpack开发服务功能
//      devServer:{},
//      /*
//      webpack提供了一个Plugin插件配置项，可以讲项目中的js文件通过配置的插件进行解析
//      插件（Plugins）是用来拓展webpack功能的，他们会在整个构建过程中生效，执行相关的任务。
//      Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程
//      中用来处理源文件的（jsx、scss、less），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程起作用

//      使用某个插件，需要通过npm进行安装，然后再webpack.config.js配置文件的plugins（试一个数组）配置项中添加该插件的实例
//      */
//     plugins:[
//      new HtmlWebpackPlugin({
//          template:path.join(__dirname,'/index.html')//new一个这个插件的实例，并传入相关的参数
//      })   
//     ]
// }

//环境变量env的使用
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
//path:Node.js Path模块  表示当前处置文件的目录
//path_resolve:将文件转为绝对路径
//__dirname:nodejs中的全局变量，指向当前文件所在的目录
//入库起点（entry point）指示webpack应该使用哪个模块，来作为构建其内部依赖图的开始，
//进入入口起点后，webpack会找到有哪些模块和库是入口起点（直接和间接）依赖的。
//默认值是./src/index.js，但你可以通过在webpack.config.js中配置entry属性，来指定一个（或多个）不同的入口起点

//单文件入口配置
module.exports = (env) => {
    console.log(env.NODE_ENV);//local
    console.log(env.production)
  return {
    //入口文件的配置项
    entry: {
      main: "./src/index.js",
    },
    //出口文件的配置项
    output: {
      path: path.resolve(__dirname, "dist"), //把dist目录变为绝对路径
      filename: "index.js", //main.js输出到dist目录下的文件名称
    },
    //模块，例如解读css.图片如何转换，压缩
    module: {},
    //插件，用于生产模板和各种功能
    plugins: [],
    //配置webpack开发服务功能(安装完webpack=dev-server后，可以在这里做一些配置)

    devServer: {
      contentBase: path.join(__dirname, "dist"), //项目目录
      compress: true, //gzip压缩
      port: 9000, //服务端口
      //host:'0.0.0.0',//ip地址
      https: true, //开启https
      open: true, //启动后自动打开浏览器
      proxy: {
        //代理
        "/api": {
          //'/api'开头的请求会被代理
          target: "http://localhost:3000", //代理地址
          pathRewrite: { "^/api": "" }, //替换接口中'/api'字符串
        },
      },
    },
  };
};