webpack安装
- 需要先安装node.js(npm)
- 地址为https://nodejs.org/en/
- 安装完成后新建项目并在项目里初始化npm 【npm init】
- 随后先后执行npm i webpack -g 和 npm i webpack-cli -g 以安装webpack所依赖的两个文件
- webpack核心概念 【入口，出口，模式，loader，插件】
- 出入口
- webpack执行流程是你指定一个文件进行打包，如果有引入其他文件则连同一起打包并输出到指定文件夹，指定文件名。
- 新建文件夹并在文件夹中新建文件webpack.config.js【固定写法】
- 在文件夹新建两个.js的文件，并在文件中写分别写出不一样的控制台输出 然后在其中一个文件中写入引入另一个文件 例如：
//引入文件,括号里写地址不需要加后缀 require('./main2'); //输出 console.log('这是第一个文件'); //下面是第二个文件里的写----------------------------- console.log('这是第二个文件'); const cat = { name:'惕隐' } //导出文件，后面跟你需要导出的对象，变量，常量 module.exports = cat;-
在webpack.config.js中写 【官方地址：https://www.webpackjs.com/concepts/】
//导入path模块，path是node自带的【固定】 const path = require('path'); //导出配置 module.exports = { //配置入口文件 就是程序从那个文件打开打包我的第一个js文件名字叫main， entry: './main.js', //配置出口 output: { //配置导出的文件位置 __dirname是当前文件夹内的意思 dist 的是到出到那个文件夹里【如果没有该文件夹则自动创建】 path: path.resolve(__dirname, 'dist'), // 导出的文件的名字叫什么 filename: 'sst.js' }, }; 最后在当前文件中打开终端执行webpack，然后会多出一个dist【取决于你配置出口中所写的文件夹名字】的文件夹打开他会有一个sst.js【取决配置导出文件名字】的文件
打开在已经打包的文件上启动终端并执行node 【文件名字】 就可以顺利输出
- 模式【详细请看开发文档：https://www.webpackjs.com/concepts/#模式】
- mode: 'development' 开发环境
- mode: 'production' 生产环境
- loader加载器【解释器】
- webpack打包工具 只能识别.js的文件，并不能打包.css的文件因此想要连同css一起打包的话，就需要用到loader加载器向webpack去说明该如何处理css文件。
- 我们想要打包css想要用到两个额外的东西分别是css-loader 和 style-loader 我们想要用npm 进行安装 在文件夹内打开终端执行 npm i --save-dev css-loader style-loader 等待安装完成
- 安装完成后新建个style.css文件并 写入
body{ background: red;}随后在第一个js文件中引入他映入css文件必须写后缀require('./style.css'); - 完成后打开webpack.config.js文件【你可以在这里看为什么这样做，他是另一方的东西，并不是webpack自己带的，所以上面要求用npm下载css-loader 和 style-loader ，https://www.npmjs.com/package/css-loader】
//导入path模块，path是node自带的【固定】 const path = require('path'); //导出配置 module.exports = { //配置入口文件 就是程序从那个文件打开打包我的第一个js文件名字叫main， entry: './main.js', //配置出口 output: { //配置导出的文件位置 __dirname是当前文件夹内的意思 dist 的是到出到那个文件夹里【如果没有该文件夹则自动创建】 path: path.resolve(__dirname, 'dist'), // 导出的文件的名字叫什么 filename: 'sst.js' }, //配置模式 development为不压缩代码 production为压缩代码,默认为production mode: 'production', //loader module: { //规则【是个数组】 rules: [ //规则项 { //对什么东西生效，这里写的是.css以为着他对所有以.css结尾的文件生效 test: /\.css$/, //让webpack先使用以下两种东西去解析css文件【注意两种东西是第三方并不是webpack自带的】 use: ['style-loader', 'css-loader'], }, ], }, }; - 然后在控制台运行webpack就没有问题了，如果要看效果请新建一个html文件并引入压缩过的js文件就可以看到页面为红色。
- plugins 插件 【https://www.webpackjs.com/concepts/】
- 插件loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要require()它，然后把它添加到plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用new操作符来创建它的一个实例。 - 在文件夹内新建一个index.html的文件并打上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial- scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <span>span标签</span> <script type="text/javascript" src="sst.js"></script></body> </html> - 使用npm 安装 npm i html-webpack-plugin --save-dev
- 安装完成后打开webpack.config.js 在文件中新加
//导入path模块，path是node自带的。 const path = require('path'); // 导入 HtmlWebpackPlugin 插件【新加的】 const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过npm安装 //导出配置 module.exports = { //配置入口文件 entry: './main.js', //配置出口 output: { //配置导出的文件位置 当前文件夹内 的文件名字 path: path.resolve(__dirname, 'dist'), // js文件名字 filename: 'sst.js' }, //配置模式 development为不压缩代码 production为压缩代码,默认为production mode: 'development', //loader module: { //规则【是个数组】 rules: [ //规则项 { //对什么东西生效，这里写的是.css以为着他对所有以.css结尾的文件生效 test: /\.css$/, //让webpack先使用以下两种东西去解析css文件【注意两种东西是第三方并不是webpack自带的】 use: ['style-loader', 'css-loader'], }, ], }, //插件【新加的】 plugins: [ //设置HtmlWebpackPlugin插件 template为模板 后面跟你的模板地址 new HtmlWebpackPlugin({template: './index.html'}) ] };- 在当前文件夹运行终端 执行 npm link webpack --save-dev 如果不执行这条将会报错，执行完成后继续执行 webpack 后你就在你指定目录下看到一个 .html和一个,js的文件 打开文件会是红色背景和一段文字为 span标签
- 插件loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
