webpack - 新建文件(html-webpack-plugin)
1、第一步新建src文件夹,为本地的项目,包括 js、css、html 等;
2、第二步新建 webpack.config.js 文件,里面写上入口和出口配置等;
3、第三步打开cmd命令窗口,输入npm init -y 生成依赖配置文件package.json,在scripts中改变打包方式(webpack);
报错注意:
1、可能需要本地安装webpack,如 cnpm i webpack -D 或者 npm;
2、安装 cnpm i webpack-cli -D;
1、var path = require(‘path’); - 为node系统模块,其path要为绝对路径;filename 为固定写法,是所要输出的文件名称;
2、解决: 运行npm run webpack命令报错问题, webpack 替换为 webpack-cli 问题解决
// webpack.config.js文件
const path = require('path');
module.exports = {
entry: {
index: './src/js/index.js'
},
output: {
path:path.resolve(__dirname,'./dist'), //打包输出的目录
filename: 'js/bundle.js' //打包输出的文件名
}
};
//package.json文件
{
"name": "webpack01",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"build": "webpack --mode development"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"webpack": "^4.29.0"
}
}
1、entry — 支持多文件打包,以数组的形式,如:
entry: [
‘./src/js/index.js’,’./src/js/index2.js’
]
其打包的顺序为从左到右依次执行打包;
2、多入口 多出口配置:(entry)
entry: {
index: './src/js/index.js',
index2: './src/js/index2.js'
},
output: {
path: path.resolve(__dirname,'dist/js'),
filename: '[name].bundle.js'
}
变量 [name] 对应的是entry中的名称
webpack的作用 | |
---|---|
1、打包(把多个文件夹打包成一个js文件,减少服务器压力、带宽等); | |
2、转化(例如less、sass、ts等),需要loader; | |
3、优化(spa越来越盛行,且前端项目负责度越来越高,webpack可以对项目进行优化); | |
—— | |
webpack的构成: | entry(入口文件)、output(出口文件)、loaders(转化器)、plugins(插件)、devServer(开发服务器) |
1、html-webpack-plugin —— 生成页面 插件使用
步骤 | |
---|---|
1、安装 | npm i html-webpack-plugin -D |
2、引入 | const HtmlWebpackPlugin = require(‘html-webpack-plugin’) |
3、使用(配置) | plugin:[] |
— | |
filename: - 生成的html文件名,可以带子目录,编译后的文件名 | template: — html模板地址 |
chunks: - 多页面引入js |
plugins:[
//初始化插件
new HtmlWebpackPlugin({
hash: true,
chunks: ['index2'], //单独引用index2.js
filename: 'index1.html',
template: './src/index.html',
minify: {
collapseWhitespace: true,
removeAttrbuteQuotes: true
}
})
]