作用域问题
如何解决代码拆分问题
如何让游览器支持node模块
安1:npm init -y
安2:npm install webpack webpack-cli --save-dev
安3: npm install html-webpack-plugin -D
mode: 'none', //不展示编译时候的警告,还可以选择'development'
devtool: 'inline-source-map', //可以精准的锁定出错位置行数,并且打包出的文件不再是乱码
devServer: {
static: './dist', //需要热模块更新的文件
},
在本地开发环境里安装,所以加-D
// path.resolve(_dirname,'./dist'),获取文件的绝对路径,参数一,代表当前文件的物理路径,参数2是基于这个路径下的文件路径
const path = require('path');
// HtmlWebpackPlugin,可以自动引入资源文件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口文件的地址
entry: './src/index.js',
output: {
// 指定输出文件的文件名
filename: 'budle.js',
// 指定输出路径,这个要设置为绝对路径,:webpack.config.js配置文件中----" dirname " 必须为两个下划线“_ _”,否则打包报错
path: path.resolve(__dirname, './dist'),
// 打包前清理上一次无用的打包内容
clean: true,
},
// 不展示编译时候的警告,还可以选择'development'
mode: 'none',
// 可以精准的锁定出错位置行数,并且打包出的文件不再是乱码
devtool: 'inline-source-map',
plugins: [
// 创建一个插件的实例对象
new HtmlWebpackPlugin({
template: './index.html', // 模板
filename: 'app.html', // 输出的文件名,
inject: 'body', // 自定义标签的放置位置,默认在head
}),
],
//运行路径
devServer: {
static: './dist', //需要热模块更新的文件
},
};
output: {
filename: 'budle.js',
path: path.resolve(_dirname, './dist'),
clean: true,
// assetModuleFilename: 'images/test.png'//方法2:定义资源模块的输出包名
//但是,不能每个文件名都叫这个名,所以要根据文件的内容来生成一个哈希的字符串,生成后缀名
assetModuleFilename: 'images/[contenthash].[ext]',
},
moduleS: {
//加载资源模块
rules: [
{
test: /\.png$/,
type: 'asset/resource', //资源类型
generator: {//方法1,优先级高
filename: 'images/[contenthash][ext]', //修改生成的文件的文件名
},
},
],
},
{
test: /\.svg$/,
type: 'asset/inline', //资源类型
},
{
test: /\.txt$/,
type: 'asset/source', //资源类型
},
npm install css-loader -D
npm install style-loader -D //会帮助我们把css放置到页面上
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],//顺序不能颠倒
},
{
test: /\.(css|less)$/,
use: ['style-loader', 'css-loader','less-loader'],//顺序不能颠倒
},
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//MiniCssExtractPlugin,把css提取到单独的文件中
步骤二:实例化一下
步骤四:文件打包了,但没有压缩
解决思路
npm install css-minimizer-webpack-plugin -D
步骤一:导入
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
//压缩css文件
import Xml from './assets/data.xml';
import Csv from './assets/data.csv';