webpack打包流程和注意事项！打包多个js和css文件。

时间：2024-04-04 16:50:25

1.首先在你想要生成项目的文件位置生成package.json文件（配置文件）先用cmd窗口进入你放项目的文件夹，用 npm init -y 生成package.json文件
2.开始安装webpack    npm install -D webpack  (当你的webpack是4.0版本以上时还要安装个脚手架cli,运行命令 npm install -D webpack-cli)
3.弄完后，在你的项目文件中建立3个文件夹。分别为config  (配置)，out  (输出)，src  (输入)
4.在config  配置文件夹中建立webpack.config.js文件
5.在里面写
  module.exports = {
    entry: {},            //入口,打包时你要打包哪些js文件
    output:{},            //出口，待输出的成品文件的基本信息，如：名字。输出路径
    mode:""            //模式，有个默认模式，你可以定义是开发版或者什么

  }
6.配置完后在src放入你的项目，注意js和entry里面的要有联系。
7.执行打包语句 webpack --config config/webpack.config.js
(但是这样每次保存后都要自己手动执行一遍打包程序，所以我们可以在package.json配置每次保存后自动打包一次)
在package.json文件的script中的text后面加个,号然后写上"start": "webpack --config config/webpack.config.js" 
配置好后可以直接运行项目 npm run start
8.因为只要修改了js代码，每次打包后，在out文件夹下都会重新生成一个js文件，而没用的老的打包后的js文件并不会删除，所以我们要下载webpack插件来解决。
9.在你的项目文件中安装清除缓存js的插件  npm install -D clean-webpack-plugin
10.装完后，在webpack.config.js中引入这个插件。

（打包css方法，首先安装css-loader  style-loader。执行 npm install css-loader style-loader）


打包css文件 要loader加载器,要先安装npm 正则表达式 loader打包
loader解析 相当于node下的一个js，用npm安装了
安装loader     npm install  xxx-loader  --save-dev，
在output后接一个module语块来处理打包css的文件
module:{
         rules:[
        { test: /\.css$/,
          use: [ 'style-loader', 'css-loader' ] 
        }
        ]
    },
都像这样写。
//注意！最后在你的index.html文件中引入打包后的js文件，即output中你定义的文件。

下面放代码原件

先是项目目录

webpack打包流程和注意事项！打包多个js和css文件。

package.json文件

{
  "name": "h5text",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --config config/webpack.config.js"
  },        //上面的才是最重要的，下面是你用npm安装了哪些东西，它会自动加入进入，如css-loader
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^1.0.0",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1"
  },
  "dependencies": {
    "css-loader": "^2.1.0",
    "style-loader": "^0.23.1"
  }
}

package-lock.json文件不用管

config文件夹下的webpack.config.js文件配置

 const path = require('path');		//因为path是node包里的，所以我们要包path包引入进来
 const cleanwpPlug = require('clean-webpack-plugin');
 module.exports = {
	entry: {
	   index: './src/js/index.js'
	},			//入口,打包时你要打包哪些js文件
	output:  {			//出口，待输出的成品文件的基本信息，如：名字。输出路径
	  filename: '[name].[chunkhash:8].js',	//含义是输入文件是什么名字，输出就是什么名字. 
                      //[chunkhash:8]的意思是每次输出在文件后随机生成一个8位数，让文件不一样
	  path: path.resolve(__dirname, '../out')		//__dirname这是webpack.config.js文件的 
                                               //绝对路径，'../out'  这是存包路径
	},
	module:{
	     rules:[
		{ test: /\.css$/,
		  use: [ 'style-loader', 'css-loader' ] 
		}
		]
	},	
			
	mode: "development",			//模式，有个默认模式，你可以定义是开发模式（不会压缩）或者            
                                   //生产模式（会压缩，默认）
	plugins: [
	     new cleanwpPlug(['out'],{
			root: path.resolve(__dirname, '../')
		})
	]	

  }

重点！打包css文件你必须要在入口文件先引入css文件，注意不要搞错路径

import '../css/trends.css';
import '../css/www.css';

window.onload =function(){alert(2);}

引入后在你的html文件中不要再引入其他css和js文件，只要引入你的打包后的输出js文件，我这里因为弄了一个自动清理老的打包后的输出js文件并且给了他一个随机数来区分，大家自己弄时可以把输出文件名确认下来不弄随机数，我这暂且给个参考

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>背景透明，文字不透明</title>
<style>
*{
	padding: 0;
	margin: 0;
}



</style>

<script type="text/javascript" src="../out/index.45b7cfe0.js" ></script>
//只有引入这个js文件就可以了

</head>
<body>	

<div class="demo">
	<p onclick="ss()">背景透明，文字不透明</p>
</div>

</html>

注意：大家看视频时老是看到有的解析有的文章用import引入css，有的用require。其实都是一样的，但是用import它的优先级高于require。大家要注意一下！不然会一脸懵，还有一种在config文件夹下的webpack.config.js文件配置中用loader来引入css打包等插件，个人不推荐，因为这个不能实现热更新。

相关文章