关于webpack文件的基础设置问题
生成命名文件bundle.js文件
本人新人,仅做参考
加强版
//这个path代表node的核心模块
const path = require('path')
//这个插件所产生的构造函数会帮助我们自动删除dist,左侧的方括号是结构赋值
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//导入html-webpackplugin这个插件,得到插件的构造函数
const HtmlPlugin = require('html-webpack-plugin')
//new 构造函数,创建插件实例对象
const htmlPlugin = new HtmlPlugin({
//指定要复制那个页面
template: './src/index.html',
// 指定复制出来的文件名和存放路径
filename: './index.html'
})
//使用node.js中的导出语法,向外导出一个webpack的配置对象
module.exports = {
//在开发阶段,建议大家都把devtool设置为eval-source-map
//devtool: 'eval-source-map',
//在实际开发过程中,建议大家吧devtool的值设置为nosources-source-map或者直接关闭SourceMap
devtool: 'nosources-source-map',
//代表webpack运行的模式,可选值有两个 development和production
mode: 'development',
//对文件进行压缩,开发上线时使用
// mode: 'production'
//entry:制定要处理那个文件 __dirname表示当前根目录
entry: path.join(__dirname, './src/index.js'),
//指定生成的文件要存放到哪里
output: {
//存放的目录 这个path代表存放目录
path: path.join(__dirname, 'dist'),
//生成的文件名称,默认的是main.js
filename: 'js/bundle.js'
},
//插件的数组,将来webpack在运行时会加载并调用插件
plugins: [htmlPlugin, new CleanWebpackPlugin()],
devServer: {
//打包加载完成后自动打开网页
open: true,
//更改端口号,在http协议中如果端口号是80,则被省略
port: 80,
//指定运行的主机地址
host: '127.0.0.1'
},
//模块主要作用域webpack默认只能打包处理.js结尾的文件,处理不了其他后缀的文件
//由于代码中包含了index.css文件,因此webpack处理不了
//当webpack发现某个文件处理不了的时候,会查找webpack.config.js这个配置文件,看module.rules数组中,是否配置了对应的loader加载器
//webpack把index.css这个文件,先转交给最后一个loader进行处理(先转交给css-loader)
//当css-loader处理完毕之后,会把处理结果转交给下一个loader(转交给style-loader)
//当style-loader处理完毕之后,发现没有下一个loader了,于是把处理的结果,转交给了webpack
//webpack把style-loader处理的结果,合并到/dist/bundle.js中,最终生成打包好的文件
module: { //所以的第三方模块的匹配规则
rules: [ //文件后缀名的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
//test表示匹配的文件类型 use表示要调用的loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
//如果需要调用的loader只要一个,则只传递一个字符串即可
//limit可以控制图片是否转换为base64格式的转换
//在配置url-loader的时候,多个参数之间使用&进行分隔
{ test: /\.jpg|.png|.gif$/, use: 'url-loader?limit=2222&outputPath=images' },
//exclude表示排除当前目录代码
//在配置babel-loader的时候,程序员只需要把自己的代码进行转换即可;一定要排除node——modules目录
//因为第三方包中的JS兼容性 不需要程序员关系
{ test: /\.js$/, use: 'babel-loader', exclude: '/node_modules' }
]
},
resolve: {
alias: {
'@': path.join(__dirname, './src/')
}
}
}
代码此时存放到了虚拟内存中,能够进行实时刷新