//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'字符串
},
},
},
};
};
