1、安装Nodejs及相关配置
1.1 安装nodejs
参考此文章:https://blog.csdn.net/henery_002/article/details/78016575
查看是否安装成功
1.2 配置npm的全局模块的存放路径以及cache的路径
(1)在nodejs的安装路径下建两个文件夹:node_cache和node_global
(2)然后执行如下两个命令:
npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
可以输入指令查看:
npm config get prefix
npm config get cache
1.3 配置环境变量
(1)新建【系统变量】
变量名:NODE_PATH
变量值:C:\Program Files\nodejs\node_global(对应的nodejs安装路径)
(2)再将【用户变量】下的path值后追加:
C:\Program Files\nodejs\node_global
2、安装webpack
https://blog.csdn.net/u012631731/article/details/73716951/
2.1 在D盘新建目录webxing,执行npm init
一路enter,进行初始化,会以默认参数创建package.json文件
2.2 安装webpack
在webxing的目录下执行命令,这是在项目中安装webpack:
npm install webpack --save-dev
2.3 把需要打包的文件app(包含html、js、css)放入webxing目录中
3、webpack打包
参考文章:https://www.cnblogs.com/luojianjian/p/8053113.html
https://blog.csdn.net/baizaozao/article/details/78143018
3.1 先打包html,js,css
(1)执行命令: npm install html-webpack-plugin --save-dev
npm install style-loader css-loader --save-dev
npm install extract-text-webpack-plugin --save-dev (单独把css拎出来)
(2)完成后,新建文件webpack.config.js,将其放在webxing目录下
(3)新建index.js为入口文件
require('../js/home.js');
require('../css/home.css');
(4)然后配置webpack.config.js:
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin'); //打包html的插件
var ExtractTextPlugin = require("extract-text-webpack-plugin"); //打包css的插件
module.exports = {
entry:{
'app/dist/js/index':'./app/src/js/index.js' //入口文件
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}
]
},
output:{
filename: '[name]-[chunkhash].js', //打包后index.js的名字,
},
//插件
plugins:[
new HtmlWebpackPlugin({
chunks:['app/dist/js/index'],
filename:'app/index.html',
template:'app/src/html/index.html',
inject: 'head'
}),
new ExtractTextPlugin({
filename: (getPath)=>{
return getPath('[name]-[chunkhash].css').replace("js","css")
}
}),
]
}
3.2 进行编译打包
执行命令 cnpm run webpack
成功后,webxing目录下就会生成dist文件夹,里面有对应的html、js、css文件
4、遇到的问题
(1)问题1: webpack-cli不存在
解决方案,执行命令:npm install webpack-cli -g
https://blog.csdn.net/cominglately/article/details/80543869
(2)问题2:cannot find module 'webpack/lib/node/NodeTemplatePlugin
解决方案:在package.json添加一行:
"webpack": "webpack --config webpack.config.js --progress --display-modules ---colors"
https://blog.csdn.net/zhjm07054115/article/details/78934797
(3)问题3:Tapable.plugin is deprecated.
npm install extract-text-webpack-plugin@next
问题4:打包的js文件的函数调用出错
解决方案:定义函数的时候改为如下形式:
window.test = function(){
}
https://segmentfault.com/q/1010000005148735
5、发布
dist目录下的文件就是需要发布的项目