webpack安装和基本使用 webpack安装和基本使用

webpack中文文档：https://www.webpackjs.com/
1.安装node.js
中文网站：http://nodejs.cn/download/

文章图片
image.png
选择add to path 安装并添加到环境变量当中
2.安装webpack
全局安装 webpack 命令：
npm install -g webpack
安装特定版本 webpack（比如 3.x.x）：
npm install -g webpack@3
看 webpack 是否安装成功（下面命令都可以）：
webpack -v
webpack --version
-------------------------》》》如果安装慢可以使用淘宝镜像安装
1）npm install -g cnpm --registry=https://registry.npm.taobao.org
2）npm install -g webpack@3
3.webpack打包文件
1）vs code创建一个工作区

文章图片
image.png 2）在src下面创建两个js文件
index.js

function add(num1, num2) { return num1 + num2; }export default { add }

main.js中引入index.js文件

import math from './js/index'; console.log(math.add(20, 30)); //依赖css文件 import './css/index.css'; //依赖less import './css/special.less';

index.html中引入bundle.js

Document - 锐客网 hello word!

3）创建webpack.config.js文件（名字为固定写法）

//path为node管理的，当前项目路径 const path = require('path')module.exports = { //入口文件 entry: './src/main.js', //出口文件 output: { path: path.resolve(__dirname, 'dist'), //resolve路径拼，输出路径拼接为项目下面的dist.js文件 //__dirname前面为双下划线 filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/, //css-loader只负责将css文件进行加载 //style-loader负责将样式添加到DOM中 use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }, { test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] } ] } }

4）运行npm init指令

文章图片
image.png
package name ：项目名称全英文
选择ok会生成package.json文件

{ "name": "test", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "description": "" }

【webpack安装和基本使用】5）运行npm install命令会生成关于node的一些依赖文件

文章图片
image.png
6）自定义命令
实际项目中使用npm run dev,npm run build,npm run serve
这些命令对应的是package.json文件中的script

文章图片
image.png
创建一个build属性，值为webpack，运行npm run build在dist文件夹下会同样生成bundle.js文件 ------------>>>执行npm run build会优先当前项目下寻找webpack，所以就会有局部webpack的定义，如果局部和全局的版本不一致，会出现打包错误的情况 7）本地安装webpack
命令：npm install webpack@3.6.0 --save-dev
会生成一个node_modules文件夹

文章图片
image.png
package.json文件

{ "name": "test", "version": "1.0.0", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "author": "", "license": "ISC", "description": "", //开发时依赖 "devDependencies": { "webpack": "^3.6.0" } }

8）添加css的插件
命令：npm install --save-dev css-loader
npm install style-loader --save-dev
9）使用less文件模块
命令：npm install --save-dev less-loader less
10）使用图片文件模块
命令：npm install --save-dev url-loader

{ test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { //当加载时图片小于limit，会将图片编译成base64编码格式 limit: 50000 } } ] }

如果当加载图片的体积大于limit会报错，如下：

文章图片
image.png
处理方式：
①添加命令（将图片打包到dist文件夹下）：npm install --save-dev file-loader

文章图片
image.png 执行命令后代码不报错，但是页面中会出现url地址引用不正确的问题

文章图片
image.png

文章图片
image.png ②在webpack.config.js文件中添加属性（将所有图片的引用地址指向dist文件夹下编译后的base64图片）

文章图片
image.png ③将图片打包到固定的文件夹下，名字保持不变在options添加name属性
[name]为图片自身名字
[hash:8]哈希算法的随机数避免图片重复
[ext]图片原格式

文章图片
image.png
生成图片格式

文章图片
image.png
④ES6转ES5的bable
命令：npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env

//path为node管理的，当前项目路径 const path = require('path')module.exports = { //入口文件 entry: './src/main.js', //出口文件 output: { path: path.resolve(__dirname, 'dist'), //resolve路径拼，输出路径拼接为项目下面的dist.js文件 //__dirname前面为双下划线 filename: 'bundle.js', publicPath: './dist/' }, module: { rules: [ { test: /\.css$/, //css-loader只负责将css文件进行加载 //style-loader负责将样式添加到DOM中 use: [ { loader: "style-loader" }, { loader: "css-loader" } ] }, { test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] }, { test: /\.(png|jpg|gif)$/, use: [ { loader: 'url-loader', options: { //当加载时图片小于limit，会将图片编译成base64编码格式 //默认8kb大小 limit: 8192, name: './img/[name].[hash:8].[ext]' } } ] }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } } } ] } }

4.webpack使用vue的配置过程
①.安装vue
命令npm install vue --save
②.导入vue