没有安装记得先安装webpack npm install webpack webpack-cli -D
npm init -y
来生成配置是文件 package.json
npx webpack ./src/main.js --output-filename bundle.js --output-path ./dist/ --mode development
webpack .\src\main.js .\dist\bundle.js
npx webpack a.js --output-filename b.js --output-path . --mode development
mode 表示生产还是开发模式
添加 mode: ‘production‘ 在webpack.config.js 中(如果没有这个文件就自己创建一下了)
在根目录下新建文件 webpack.config.js
webpack.config.js
文件中新建配置项module.exports = {// 打包文件入口 entry// 1. 单一条目语法可以简写// 2. 传递数组(将多个依赖文件一起注入并将其依赖关系映射到一个“块”)// 3. 对象(“可扩展的webpack配置”是可以重用并与其他部分配置组合的配置)entry: path.join(__dirname,‘./src/main.js‘), output:{// 输出文件相关配置path: path.join(__dirname,‘./dist‘),filename:‘bundle.js‘},mode: ‘production‘ // 环境}
根据入口文件,生成多个js文件
下面实例 可以生成 app.bundle.js 和 print.bundle.js 文件
entry: {app: ‘./src/index.js‘,print: ‘./src/print.js‘},output: {filename: ‘[name].bundle.js‘,path: path.resolve(__dirname, ‘dist‘)}
当我们在控制台运行 webpack
命令执行时, webpack 做了下面过程
webpack.config.js
配置文件HtmlWebpackPlugin
生成首页如果我们更改了其中一个入口点的名称,或者甚至添加了新入口点,生成的包将在构建时重命名,但我们的index.html文件仍将引用旧名称。所以可以利用工具生成一个页面来引入这些文件
npm install --save-dev html-webpack-plugin
webpack.config.js
文件中添加配置项先导入插件 const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
plugins: [new HtmlWebpackPlugin({template:"./src/index.html", // 根据 目标文件生成 htmltitle: ‘Output Management‘})]
Webpack将生成文件并将它们放在/dist文件夹中,但它不会跟踪项目实际使用的文件。
通常,最好/dist在每次构建之前清理文件夹,以便仅生成使用过的文件。
clean-webpack-plugin
npm install --save-dev clean-webpack-plugin
webpack.config.js
文件const CleanWebpackPlugin = require(‘clean-webpack-plugin‘);plugins: [new CleanWebpackPlugin([‘dist‘]),],
当使用 webpack 打包源码时,很难跟踪错误和警告到其原始位置。例如:
将三个源文件(a.js,b.js和c.js)捆绑到一个bundle(bundle.js)中,
如果其中一个源文件出现错误,则堆栈跟踪将简单地指向bundle.js。
inline-source-map
来追踪源错误给 webpack.config.js 配置文件 新增
devtool: ‘inline-source-map‘
在上面,我们已经习惯了
webpack
命令 打包"scripts": {"start": "webpack"}
使用 npm run start
来进行打包
但每次都要打包显得有麻烦,我们可以自动编译代码
让我们添加一个npm脚本,它将启动webpack的Watch Mode:
在 package.json
配置文件中新增
"scripts": {"watch": "webpack --watch",}
之后执行 npm run watch
它不会退出命令行, 当你重新编译文件后,他就会自动打包了
webpack-dev-server
之前确保安装 webpack 和 webpack-cli (全局安装不行)npm install webpack webpack-cli -D
webpack-dev-server
提供了一个简单的Web服务器和使用实时重新加载的能力
使用命令 npm install webpack-dev-server
来进行安装webpack-dev-server
webpack.config.js
devServer: { // 配置 服务器 信息 contentBase: ‘./dist‘, // 托管的目录port: 3000, // 指定端口号open: true, // 自动打开浏览器},
"start": "webpack-dev-server --open --contentBase dist --port 3000"
package.json
添加脚本来运行服务器"scripts": {"start": "webpack-dev-server --open",},
npm start
命令来运行。此时浏览器自动加载页面。如果更改任何源文件并保存它们,则在编译代码后,Web服务器将自动重新加载
它允许在运行时更新所有类型的模块,而无需完全刷新。(类似于tomcat服务器的debug模式)
const webpack = require(‘webpack‘);
devServer: {contentBase: ‘./dist‘,hot: true},
plugins: [new webpack.HotModuleReplacementPlugin()s]
"start": "webpack-dev-server --hot"
webpack-dev-middleware
他就是启动了一个服务器,将结果放到服务器上去
webpack-dev-middleware
是一个包装器,它将webpack处理的文件发送到服务器
因为 webpack-dev-middleware
依赖于 express
框架
使用 npm install --save-dev express webpack-dev-middleware
命令
output: {publicPath: ‘/‘}
publicPath运行在服务器中 提供文件http://localhost:3000
const express = require(‘express‘);const webpack = require(‘webpack‘);const webpackDevMiddleware = require(‘webpack-dev-middleware‘);const app = express();const config = require(‘./webpack.config.js‘);const compiler = webpack(config);// 告诉 express 使用 webpack-dev-middleware 和 webpack.config.jsapp.use(webpackDevMiddleware(compiler, {publicPath: config.output.publicPath}));// 服务器启动端口app.listen(3000, function () {console.log(‘请访问: http://127.0.0.1:3000\n‘);});
在package.json
文件中新增:
"scripts": {"server": "node server.js",}
npm run server
就可以了npm install --save-dev style-loader css-loader
webpack.config.js
文件中添加module: {rules: [{test: /\.css$/,use: [‘style-loader‘, ‘css-loader‘]}]},
less-loader
不过 less-loader 依赖 less
所以安装两个包配置文件:
rules: [{test: /\.less$/,use: [‘style-loader‘, ‘css-loader‘,‘less-loader‘]}]
sass-loader
就可以了。node-sass配置文件:
rules: [{test: /\.scss$/,use: [‘style-loader‘, ‘css-loader‘,‘sass-loader‘]}]
webpack使用正则表达式来确定它应该查找哪些文件并将其提供给特定的加载器。在这种情况下,任何以...结尾的文件.css都将被提供给style-loader和css-loader。
使用 url加载器 或 文件加载器
file-loader 和 url-loader 的关系:
简单说url-loader封装了file-loader,但url-loader不依赖于file-loader。
url的工作情况分两种情况:
1.文件大小小于limit参数,url-loader将会把文件转为DataURL(base64码)
2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给>file-loader。因此我们只需要安装url-loader即可
npm install --save-dev url-loader
webpack.config.js
配置文件新增图片匹配规则module: {rules: [{test: /\.(png|svg|jpg|gif)$/,use: [‘url-loader‘]}]},
文件和URL加载器将获取你通过它们加载的任何文件,并将其输出到构建目录。这意味着我们可以将它们用于任何类型的文件,包括字体
npm install --save-dev file-loader
webpack.config.js
配置文件新增字体匹配规则module: {rules: [{test: /\.(woff|woff2|eot|ttf|otf)$/,use: [‘url-loader‘]}]},
npm install --save-dev csv-loader xml-loader
webpack.config.js
配置文件新增数据类型文件匹配规则{test: /\.(csv|tsv)$/,use: [‘csv-loader‘]},{test: /\.xml$/,use: [‘xml-loader‘]}
这样就可以import将这四种类型的数据中的任何一种(JSON,CSV,TSV,XML)导入使用了
加载 Babel 包,用来将 webpack 处理不的 ES6或ES7 语法 转换为 低级语法
npm install babel-core babel-loader babel-preset-env -D
webpack.config.js
添加处理规则// 使用babel-loader在webpack打包时处理js文件{test: /\.js$/,loader: ‘babel-loader‘,include: [path.resolve(__dirname, ‘src‘)] // src目录下的js文件}
在项目根目录下新建 .babelrc
文件
{"presets": ["env"]}
如果想要使用 草案阶段ES 的语法规则 记得就是用下面的转换规则和配置了
npm i babel-preset-stage-2 -D
.babelrc
配置文件{"presets": [["env", {"targets": {"browsers": ["> 1%", "last 2versions", "not ie <= 8"]}}],"stage-2"]}
以上配置表示使用babel-preset-env编译js,且浏览器环境为:1、全球市场份额大于1%的浏览器2、最后2个版本的浏览器3、大于IE8版本的IE浏览器然后再使用babel-preset-stage-2插件编译尚处在草案阶段的语法
babel-preset-loader、babel-preset-env、babel-preset-core这3个插件就能满足使用webpack打包js文件时先通过babel编译js为es5的代码
babel-preset-stage-2插件可以处理草案阶段的ECMASCRIPT语法
- - - - - - -
npm install --save-dev babel-core babel-loader babel-plugin-transform-runtime
npm install --save-dev babel-preset-env babel-preset-stage-0
webpack.config.js
添加处理规则、{test: /\.js$/,use: [‘babel-loader‘],exclude:/node_modules/ // 不处理这个包下的文件}
.babelrc
,存放在项目的根目录下.{"presets": [],"plugins": []}
package.json
使用"babel":{"presets": [], // 配置语法规则"plugins": [] // 配置插件}
此时你应该明白他们之间的关系了。 所以 .babelrc
是遵循json语法格式的
presets: 表示转码规则
建议安装 npm install babel-presets-env -D
注意:在使用ES7语法规则时候就要添加
babel-preset-stage-0
babel-preset-stage-1
babel-preset-stage-2
babel-preset-stage-3
babel-preset-stage-4
中的一个就可以了。 使用方法见上面
plugins:转码插件
npm 安装时,可能会有一个 baabel-core 和 babel-loader 不匹配的现象。
此时,根据提示 更换 baabel-core 或者 babel-loader 版本即可了。
npm install vue -S
npm install vue-loader vue-template-compiler -D
webpack.config.js
文件 新增const VueLoaderPlugin = require(‘vue-loader/lib/plugin‘);plugins: [ // 配置插件的节点new VueLoaderPlugin(),],{test:/\.vue$/,use:[‘vue-loader‘]}
render:c=>c(组件名称)
import Vue from ‘vue‘
导入的和script 引入的并不一样。其实这个并不常用。。也不需要配置
- 在
webpack.config.js
文件中配置resolve:{alias:{"vue$": "vue/dist/vue.js"}}
- 使用 import Vue from ‘../node_modules/vue/dist/vue.js‘
npm install mint-ui -D
import Mint from ‘mint-ui‘;Vue.use(Mint);import ‘mint-ui/lib/style.css‘;
import { Header } from ‘mint-ui‘;import ‘mint-ui/lib/header/style.css‘;Vue.component(Header.name, Header);
这时候就会发现需要单独导入css文件,有些繁琐
npm install babel-plugin-component -D
.babelrc
配置"plugins": [["component", [{"libraryName": "mint-ui","style": true}]]]
可能编译器会有一些提示。不要在意就好了
npm install vue-router -D
下载路由import VueRouter from ‘vue-router‘Vue.use(VueRouter);
var router = new VueRouter({routes:[ // 路由匹配规则{ path:‘/home‘, component: HomeContainer},]})
var vm = new Vue({el:"#app",router, // 挂载 路由});
当然可以把路由模块抽离出去,封装起来 (建议这样做)
vue-resource
npm i vue-resourse -D
import VueResourse from ‘vue-resourse‘Vue.use(VueResourse);
this.$http.get("url").then(function(result){// auto});
post:
Axios 是一个基于 promise 的 HTTP 库
npm install axios vue-axios -D
import Axios from ‘axios‘import VueAxios from ‘vue-axios‘Vue.use(VueAxios,Axios)
axios.get(‘url‘).then(function(response){})axios.get(‘url‘,{params:{id:12345, name:‘ay‘}}).then((response)=>{console.log(response)})axios.get(‘url?id=12345&name=ay‘).then(function(response){})
axios.post(‘index.php‘,{id:12345,name:‘ay‘}).then((response)=>{console.log(response)})
function getUrl1() {return axios.get(‘url1‘);}function getUrl2() {return axios.get(‘url2‘);}axios.all([getUrl1(), getUrl2()]).then(axios.spread(function (acct, perms) {// acct为第一个请求的结果,perms为第二个请求的结果}));
可以从浏览器中创建XHR对象
(异步)
可以从nodeJS中创建HTTP请求支持Promise API
(异步,链式编程)
可以拦截请求和响应 (关键点, 可以做切面编程)可以转换请求数
可以取消请求
可以自动转换JSON数据
(移动端)
客户端支持防御XSRF
ui
npm install mockjs