文章目录

• • 1 Webpack介绍及安装
  • 2 webpack起步
  • 3 webpack配置
  • 4 loader
  • • 4.1 css-loader、style-loader
    • 4.2 less-loader
  • 5 webpack图片文件处理
  • 6 webpack使用vue的配置

1 Webpack介绍及安装

https://webpack.js.org/concepts/

https://www.webpackjs.com/

• 本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具

安装：

• 首先要安装Node.js、版本大于8.9

• 查看node版本

node -v

• 全局安装webpack(指定3.6.0、因为vue cli2依赖该版本)

npm install webpack@3.6.0 -g

• 局部安装

cd 对应目录
npm install webpack@3.6.0 --save-dev

• 为什么全局安装后，还需要局部安装呢？

1. 在终端直接执行webpack命令，使用全局安装的webpack

2. 当package.json中定义了scripts时时，其中包含了webpack命令，那么使用的是局部webpack

2 webpack起步

打包

webpack ./src/main.js ./dist/bundle.js

3 webpack配置

webpack.config.js

// 使用node的包path
// 初始化: npm init
const path = require('path')module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname,'dist'),// 当前文件绝对路径filename: 'bundle.js'}
}

打包

webpack

使用脚本

# 初始化
npm init
# 安装package-lock.json中的依赖
npm install

package.json文件中scripts存放脚本，可以自定义

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

# 测试脚本npm run test
# 打包
npm run build

4 loader

4.1 css-loader、style-loader

1. 通过npm安装需要使用的loader

https://www.webpackjs.com/loaders/css-loader/

安装cssl和style的loader

npm install --save-dev css-loader
npm install style-loader@2.0.0 --save-dev

file.js

import css from 'file.css';

webpack.config.js

module.exports = {module: {rules: [{test: /\.css$/,use: [ 'style-loader', 'css-loader' ]}]}
}

2. 在webpack.config.js中module关键字下进行配置

4.2 less-loader

npm install --save-dev less-loader less

5 webpack图片文件处理

url-loader

npm install --save-dev url-loader{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 8192}}]
}

css

body {/*background-color: pink;*/background: url("../img/1.jpg");
}

6 webpack使用vue的配置

npm install vue --save

webpack.config.js

// 指定查找vue的路径
resolve:{// alias: 别名alias:{'vue$':'vue/dist/vue.esm.js'}
}

main.js

// 5.使用vue进行开发
import Vue from 'vue'const app = new Vue({el: '#app',data: {message: '你好'}
})

npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev

代码地址：
https://github.com/courageSteak/vue-framework

作者：有勇气的牛排
https://www.couragesteak.com/article/158