如何使用webpack打包独立页面
初始化
首先我们需要在项目根目录执行npm init来初始化(一路回车)
安装webpack
首先在项目文件夹打开命令窗,然后执行命令
npm install webpack webpack-cli --save-dev
在项目根目录新建webpack.conf.js用来配置webpack
const path = require('path') //文件路径处理
const htmlWebpackPlugins = require('html-webpack-plugin')//引入处理html的插件
module.exports = {
// 输入路径配置
entry: path.resolve(__dirname, './src/index.js'),
// 输出文件名和路径配置
output: {
filename: 'index.js',
path: path.resolve(__dirname, './dist')
},
// 引入插件配置
plugins: [
new htmlWebpackPlugins({
// 输出文件名
filename: 'perfrom.html',
// 所引用模板文件位置
template: path.resolve(__dirname, './src/html/perfrom.html'),
// js 文件插入的位置
inject: 'body'
}),
//引入多个html时需要配置多个
new htmlWebpackPlugins({
// 输出文件名
filename: 'perfrom-exeuctor.html',
// 所引用模板文件位置
template: path.resolve(__dirname, './src/html/perfrom-exeuctor.html'),
// js 文件插入的位置
inject: 'body'
}),
],
// 文件类型转换配置
module: {
rules: [
{
// 正则匹配 html 文件
test: /\.html$/,
use: [
{
// 引入 html 文件加载插件
loader: 'html-loader'
}
]
},
{
// 正则匹配 css 文件
test: /\.css$/,
use: [
{
// 引入 style 文件加载插件
loader: 'style-loader'
},
{
// 引入 css 文件加载插件
loader: 'css-loader'
}
]
},
{
// 正则匹配 js 文件
test: /\.js$/,
exclude:/(node_modules| js)/,
use: [
{
loader: 'babel-loader',
options:{
presets:['es2015']
}
},
]
},
]
}
}
改写npm命令,在package.js中的script部分进行修改
"scripts": {
"dev": "webpack --mode development --config ./webpack.conf.js",
"build": "webpack --mode production --config ./webpack.conf.js"
},
现在打包变成了 npm run dev
一般我们的项目,打包时不止需要打包js文件,还有html-css-font等文件资源,所以我们还需要继续执行以下命令
安装处理html文件的插件
npm install html-webpack-plugin --save-dev
安装帮助webpack处理css文件的插件
npm install css-loader --save-dev
安装帮助webpack解析html文件的插件
npm install html-loader --save-dev
安装帮助webpack将打包好的样式以style的方式插入html插件
npm install style-loader --save-dev
调整项目结构
新建src文件夹,里边放着我们需要的文件资源,另外新建一个入口文件Index.js,将需要用到的css文件配入到里边
import './css/normalize.css'
import './css/perfrpm-ele.css'
import './css/perfrpm-molding.css'
import './css/perfrpm-molding-extral.css'
import './css/CostCalculation.css'
import './css/perfrpm.css'
import './css/element.css'
const App = function () {
var dom = document.getElementById('app')
}
new App()
最后就是在命令行输入npm run dev打包
完成后可以将打包好的dist文件夹拿去发布啦