webpack中文文档：https://www.webpackjs.com/
1.安装node.js
中文网站：http://nodejs.cn/download/
选择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创建一个工作区
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指令
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": ""
}
5）运行npm install命令会生成关于node的一些依赖文件
6）自定义命令
实际项目中使用npm run dev,npm run build,npm run serve
这些命令对应的是package.json文件中的script
创建一个build属性，值为webpack，运行npm run build在dist文件夹下会同样生成bundle.js文件
------------>>>执行npm run build会优先当前项目下寻找webpack，所以就会有局部webpack的定义，如果局部和全局的版本不一致，会出现打包错误的情况
7）本地安装webpack
命令：npm install [email protected] --save-dev
会生成一个node_modules文件夹
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会报错，如下：
处理方式：
①添加命令（将图片打包到dist文件夹下）：npm install --save-dev file-loader
执行命令后代码不报错，但是页面中会出现url地址引用不正确的问题
②在webpack.config.js文件中添加属性（将所有图片的引用地址指向dist文件夹下编译后的base64图片）
③将图片打包到固定的文件夹下，名字保持不变在options添加name属性
[name]为图片自身名字
[hash:8]哈希算法的随机数避免图片重复
[ext]图片原格式
生成图片格式
④ES6转ES5的bable
命令：npm install [email protected] @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
//使用vue
import Vue from 'vue'
new Vue({
el: "#app",
data: {
message: "hello webpack!!!"
}
})
③.如果运行时报错如下，就是配置vue的版本不正确
解决方法：webpack.config.js中配置如下
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 用 webpack 1 时需用 'vue/dist/vue.common.js'
}
}
}
④配置webpack解析template模板
命令：cnpm install --save-dev vue loader vue-template-compiler
重新安装npm：cnpm install
webpack.config.js配置module
配置package.json
⑥创建vue文件
{{message}}
{{name}}
⑦main.js引入
import App from './vue/app.vue'
new Vue({
el: "#app",
data: {
message: "hello webpack!!!"
},
template:"