1. 认识webpack - 模块化 - 打包
模块和打包
前端模块化方案：AMD、CMD、CommonJS、ES6
打包：grunt、gulp、webpack、rollup(vue源码通过rollup构建)
2. webpack的安装 - node - 全局安装 - 局部安装
-
node -v // webpack
-
npm install [email protected] -g // 全局安装
-
npm install [email protected] --save-dev // 局部安装、目录当中
3. webpack的起步 - 模块化 - 打包自动依赖
-
创建项目文件夹
-
创建src、创建dist
-
创建main.js，作为程序的入口，或者叫做index.js。
-
创建index.html，引用main.js
-
如果在src文件夹下面都按照原来的js文件写法，会具有变量函数冲突问题，用模块化开发。
-
模块化，用AMD、CMD、CommonJS、ES6模块化规范都是可以的。
什么是CommonJS的规范？
function add(num1,num2){
return num1 + num2
}
function mul(num1,num2){
return num1 * num2
}
module.exports = {
add,
mul
}
const {add,mul} = require('./mathUtils.js')
console.log(add(20, 30));
console.log(mul(20, 30));
-
你用CommonJS规范进行模块化开发的时候，肯定要进行测试。
-
但是在index.html当中，你引入这些main.js这些文件没用。
-
因为浏览器根本就不认识CommanJS这些规范。
-
所以，你可以使用webpack对这些js文件进行打包。
-
然后在index.html当中引用浏览器能够认识的js文件，这样就能够进行测试。
-
打包的时候，webpack会自动处理模块之间相互的依赖。
-
webpack打包后会生成一个最终的js文件，在index.html当中只需要引用最终的JS文件就可以了。
-
webpack ./src/main.js ./dist/bundle.js //把main.js打包bundle.js
-
webpack的强大功能，就是两个：一个模块化，一个解决打包依赖。
什么是ES6的模块化？
export const name = "why";
export const age = 18;
export const height = 1.88;
import {name,age,height} from './info.js'
console.log(name);
console.log(age);
console.log(height);
webpack的最基本的使用，就是两个功能
模块化、打包自动依赖
4. webpack的配置 - node - package.json - webpack - webpack.config.js
-
用
webpack ./src/main.js ./dist/bundle.js这个命令很麻烦，不智能 -
怎么只输入webpack就打包，通过配置文件。
-
在项目根目录下创建webpack.config.js，名字是固定的。
-
在webpack当中配置入口和出口
-
在配置出口output的过程当中需要依赖node的内置模块，具体看如下代码。
const path = require('path')
module.exports = {
entry: './src/main.js',
// output: './dist/bundle.js',
output: {
// path: './dist', //------------> 这里要求是绝对路径，所以要动态获取绝对路径
// 要使用node的path模块
// npm init 初始化 项目当中要用node的东西，就要一开始执行这个命令
// 生成package.json
// package.json当中如果依赖其他的东西，就要使用npm install命令。
// path模块当中的resolve函数，是拼接路径的。__dirname是全局变量，是当前文件的目录绝对路径。
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
},
}
- 这个时候，就可以使用webpack这个命令，直接进行打包了。
webpack的打包命令太过于繁琐。
通过webpack的配置文件webpack.config.js当中配置入口和出口
直接简单使用webpack命令，就可以完成打包
-
但是如果webpack有多个配置文件，打包的时候，就还要指定配置文件。
-
例如webpack production.config.js
-
webpack-dev-server等这些名字也很长。
-
将webpack的命令，映射到node的npm run build命令即可。
-
映射需要在package.json当中配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
-
在命令行当中直接使用webpack命令打包，100%使用全局安装的webpack，不利于团队开发。
-
使用node中package.json当中配置映射命令，执行npm run bulid执行webpack打包，优先使用本地webpack
5. loader的使用
-
通过第三小节的webpack使用和第四小节的webpack配置，就能够对js实现模块化开发
-
真实开发当中还有一些其他的需求，比如说：
使用css
使用图片
ES6转化成为ES5代码
TypeScript转化为ES5代码
scss、less转化为css
.jsx、.vue文件转化为js文件 -
要用loader扩展webpack，就可以实现上面的功能。
-
css
npm install css-loader --save-dev
npm install style-loader --save-dev
npm install less-loader less --save-dev
这样安装less-loader打包会报错
ERROR in ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./src/css/special.less
Module build failed: TypeError: loaderContext.getResolve is not a function
npm uninstall less-loader
npm install [email protected] --save-dev
npm install url-loader --save-dev
npm install file-loader --save-dev // 注意 publicPath: 'dist/' --- webpack.config.js
加载图片下于大小限制，会以base64编码成为字符串形式 url加载
npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
module: {
rules: [
{
test: /\.css$/,
use: ['style-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|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
name: 'img/[name].[hash:8].[ext]'
},
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
}
css-loader
style-loader
less-loader
url-loader
file-loader
babel-loader
babel-core
babel-preset-es2015
npm install vue-loader vue-template-compiler --save-dev
6. webpack中配置vue
vue构建最终发布版本时候，有两类
-
runtime-only：代码当中不能够有任何的template
-
runtime-compiler：代码当中可以有template
-
npm install vue --save
-
webpack配置vue版本
resolve: {
alias:{
'vue$': 'vue/dist/vue.esm.js'
}
}
-
SPA = single page web application 单页面富应用。
-
多页面通过router，只有一个index.html。
-
第一，index.html当中什么代码都没有，只有一个
<div id="#app"></div> -
html代码全部写入到main.js vue对象的template当中。
-
第二，template代码很恶心，要抽取掉。
-
把main.js的vue实例当中template和data、method全部都抽取成一个组件。
-
将组件注册当中vue实例当中，并在vue实例当中使用。
-
第三，把组件抽取成一个js文件，模块化导出组件对象，main.js当中导入使用一下。
-
第四，组件js文件当中，模板和js代码没有分离，通过创建vue文件解决。
-
npm install vue-loader vue-template-compiler --save-dev
-
webpack.config.js当中配置一下：
{
test: /\.vue$/,
use: ['vue-loader']
}
- 使用vue-loader版本过高，需要配置插件，直接先使用13.0.0版本
html当中代码抽取到入口js的template当中
将template当中代码抽取到组件中，vue实例当中注册组件
将组件当中代码，模块化一个文件导出，入口js当中导入
vue文件
7. plugin的使用
插件都是要在webpack.config.js当中导入的，loader不需要。
- new webpack.BannerPlugin('最终版权归program所有')
- npm install html-webpack-plugin --save-dev //3.2.0
有了html-webpack-plugin: webpack.config.js当中publicPath配置去掉
配置自动生成index.html的模板
- npm install [email protected] --save-dev
// 插件
plugins: [
new webpack.BannerPlugin('最终版权归program所有'),
new HtmlWebpackPlugin({
template: 'index.html'
}),
new UglifyJsPlugin()
]
8. 搭建本地服务器
-
npm install [email protected] --save-dev
-
webpack-dev-server安装后，不用导入，直接配置，类似loader
-
开发阶段不用丑化，生产编译才需要，编译也不需要webpack-dev-server
-
webpack.config.js当中有些配置是开发中用，有些配置是编译打包用
-
分离抽取一下webpack.config.js，为base.config.js，prod.config.js，dev.config.js
-
npm install webpack-merge --save-dev
- npm init，项目进行node初始化，生成package.json
- npm install webpack --save-dev，项目本地安装webpack打包
- 安装loader,vue,插件,本地服务器