webpack打包

webpack打包

定义: webpack是一个静态资源打包工具(html,css,js)

webpack的使用(第一种方法)

1. 安装webpack

• ```javascript
  // 使用node安装webpack
  安装参数说明:
  1. -g 全局安装
  2. -D 安装在devDependencies中,项目打包上线之后就删除该模块
  3. -S 安装在dependencies中,上线之后依然保留(默认)

  安装语法:
  npm i webpack
  npm i webpack-cli

2. 创建静态资源文件

• ```javascript
  //1. 创建一个html文件

  • aaaaaaa
  • aaaaaaa
  • aaaaaaa
  • aaaaaaa
  • aaaaaaa
  • aaaaaaa

  //2. 创建一个js文件(index.js)
  //在js文件中使用ES6语法导入jQuery模块,然后设置html页面样式
  import $ from "jquery";
  $("ul li:even").css({'background':'pink'});
  $("ul li:odd").css({'background':'blue'});

3. 以上方法直接运行,出现报错

index.js:2 Uncaught SyntaxError: Cannot use import statement outside a module
//也就是说,不认识这个import的语法

4.( 解决上面问题) 对上面的index.js文件打包

//在cmd中,使用webpack命令对index.js文件打包
	webpack ./index.js -o dist
    
//命令解释: 使用webpack 对 ./index.js 文件打包,然后输出到dist目录

5. 以上命令会出现如下报错

'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件。

//导致这个问题的主要原因是webpack没有全局安装,但不建议全局安装

6. ( 解决上面问题) 找到内部关系(package.json),创建内部自定义指令

• ```javascript
  //在json文件中找到scripts这个键,在里面创建自定义指令
  "scripts": {
  "test": "echo "Error: no test specified" && exit 1",//自带
  "start" : "webpack ./index.js -o dist" //这个是自定义的,键名可以自定
  },

7. cmd窗口中执行自定义指令

npm run 自定义指令名

//打包后,会出现一个警告
/*
	WARNING in configuration
	The 'mode' option has not been set, webpack will fallback 	  to 'production' for th
	is value.
	Set 'mode' option to 'development' or 'production' to 		enable defaults for each e
    nvironment.
*/

这个警告表示需要设置一个模式
{
    1.development 开发模式
	2.production  生产模式(打包需要)
}

所以设置模式的语句为:
"start" : "webpack ./index.js -o dist --mode production"

webpack的使用(第二种方法)

1. 创建一个配置文件(完成打包工作)

1.配置文件名: webpack.config.js
2.配置文件中写打包js文件的代码
	1-1.引入路径模块
    	const path = require("path");
	1-2.外部
    	module.exports = {
  			//进入:找到要打包的文件
  			entry:path.join(__dirname,"./index.js"),
  			//输出:
  			output:{
                //将打包后的文件的存放路径
    			path:path.join(__dirname,"./dist"),
                //设置打包的js文件名
    			filename:"index.js"
  			}
		}

2. 在json文件中写一个自定义指令

"nstart" : "webpack --config webpack.config.js --mode production"

解释: 使用webpack打包 配置文件名叫 webpack.config.js

3. cmd窗口中执行自定义指令

npm run 自定义指令名