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

webpack 专栏收录该内容
2 篇文章 0 订阅

先写一下我的例子:

 const path = require('path');        //因为path是node包里的,所以我们要包path包引入进来
 const cleanwpPlug = require('clean-webpack-plugin');  
//这里是引用那个清除的插件,注意该插件只能清除一个js
 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:{        //引入打包css的插件
         rules:[
        { test: /\.css$/,
          use: [ 'style-loader', 'css-loader' ] 
        }
        ]
    },    
            
    mode: "development",            //模式,有个默认模式,
//你可以定义是开发模式(不会压缩)或者生产模式(会压缩,默认)
    plugins: [     //使用清除插件
         new cleanwpPlug(['out'],{
            root: path.resolve(__dirname, '../')
        })
    ]    

  }

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 css-loader style-loader,
在output后接一个module语块来处理打包css的文件
module:{
         rules:[
        { test: /\.css$/,
          use: [ 'style-loader', 'css-loader' ] 
        }
        ]
    },
都像这样写。
//注意!最后在你的index.html文件中引入打包后的js文件,即output中你定义的文件。

下面放代码原件

先是项目目录

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打包等插件,个人不推荐,因为这个不能实现热更新。

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

打赏
文章很值,打赏犒劳作者一下
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页

打赏

Black____White

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值