webpack打包前端项目

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目录下的文件就是需要发布的项目