webpack 2x
- entry
- output
- loaders
- plugins
webpack 4x:
新手指南
从零开始
npm init
npm install webpack --save-dev //webpack@4.16.1
npm install webpack-dev-server --save-dev //webpack-dev-server@3.1.4
创建webpack.config.js
var config = {
}
module.exports = config
注:这里的module.exports = config
相当于export default config
,由于目前还没有安装支持ES6的编译插件,因此不能直接使用ES6的语法 否则会报错
package.json
的scripts里添加一个快速启动webpack-dev-server服务脚本:
npm run dev 后默认打开的地址是: 127.0.0.1:8080
可以自己配置:
"dev": "webpack-dev-server --host 197.163.1.2 --port 8888 --open --config webpack.config.js"
// webpack.config.js
var path = require('path')
module.exports = {
entry: { //告诉webpack从哪里找依赖并编译
main: './main'
},
output: { // 配置编译的文件储存位置和文件名
path: path.join(__dirname, './dist'),
publicPath: '/dist/',
filename: 'main.js'
}
};
// index.html
<!DOCTYPE html>
<html>
<head>
<title>webpack test</title>
</head>
<body>
<div id="app">您好, 镜心的小树屋欢迎您</div>
<script type="text/javascript" src="/dist/main.js"></script>
</body>
</html>
npm run dev 启动
如果报错:
npm install webpack-cli -D // "webpack-cli": "^3.0.8",
npm run dev
main.js
document.getElementById('app').innerHTML = "你好美"
进行打包
webpack --progress -- hide-modules// 会生成一个/dist/main.js
完善配置文件
https://github.com/icarusion/...
// css加载器
npm install css-loader --save-dev // style-loader@0.21.0
npm install style-loader --save-dev // css-loader@1.0.0
安装后,在webpack.config.js文件配置Loader,添加.css文件处理
module对象rules属性中可以指定一系列loaders。
use选型的值可以是数组或字符串,如果是数组,它的编译顺序就是从后往前。extract-text-webpack-plugin
插件是用来把散落在各地的css提取出来,并生成一个main.css文件,最终在index.html通过<link>加载
npm install extract-text-webpack-plugin --save-dev
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {
entry: {
main: './main'
},
output: {
path: path.join(__dirname, './dist'),
publicPath: '/dist/',
filename: 'main.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'style-loader'
})
},
{
test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,
loader: 'url-loader?limit=1024'
}
]
},
plugins: [
// 重命名提取后的css文件
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true
})
]
};
module.exports = config;
快速构建
快速构建最好的自然是使用脚手架, 你可以选择:
Webpack boilerplate CLI: https://www.npmjs.com/package...
easywebpack-cli: https://yuque.com/hubcarl/ves...
vue-cli: https://github.com/vuejs/vue-cli
单文件系统 与 vue-loader
先看这个:https://vue-loader.vuejs.org/... 了解文档内容
npm install --save vue // vue@2.5.16
npm install --save-dev vue-loader vue-style-loader vue-template-compiler vue-hot-reload-api babel babel-loader babel-core babel-plugin-transform-runtime babel-preset-es2015 babel-runtime
VUE-CLI 3 :https://cli.vuejs.org/guide/installation.html
修改webpack.config.js 支持.vue
和 es6
var path = require('path')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
entry: { //告诉webpack从哪里找依赖并编译
main: './main'
},
output: { // 配置编译的文件储存位置和文件名
path: path.join(__dirname, './dist'),// 打包后的输出目录
publicPath: '/dist/',// 指定资源文件引用目录(如果资源在cdn上 可以是cdn网址)
filename: 'main.js'//
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: 'css-loader',
fallback: 'vue-style-loader'
})
}
]
},
plugins: [
new ExtractTextPlugin("main.css")
]
};
根目录新建.babelrc
{
"presets": ["es2015"],
"plugin": ["transform-runtime"],
"comments": false
}
注意:
此种设置需要把webpack降级到2x:
webpack: 2.3.2
webpack-dev-server: 2.4.2
我们看看实际项目中依赖(webpack2的)
{
"name": "test",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "AlexZ33",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src",
"test": "mocha test/*.js"
},
"dependencies": {
"axios": "^0.16.1",
"d3": "^4.8.0",
"d3-cloud": "^1.2.4",
"echarts": "^3.5.2",
"echarts-wordcloud": "^1.1.0",
"iview": "^2.5.1",
"jquery": "^3.3.1",
"jsonp": "^0.2.1",
"lodash.merge": "^4.6.1",
"promise-polyfill": "^6.0.2",
"shave": "^2.1.3",
"url-search-params": "^0.9.0",
"vue": "^2.3.4",
"vue-router": "^2.2.0",
"vue-select": "^2.4.0",
"vuex": "^2.4.0",
"wordcloud": "^1.0.6"
},
"devDependencies": {
"autoprefixer": "^6.7.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.2.1",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^4.0.2",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.26.1",
"eslint": "^3.14.1",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^2.0.7",
"eslint-loader": "^1.6.1",
"eslint-plugin-html": "^2.0.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.10.0",
"friendly-errors-webpack-plugin": "^1.1.3",
"fullpage.js": "^2.9.4",
"function-bind": "^1.1.0",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"mocha": "^3.4.2",
"node-sass": "^4.9.0",
"opn": "^4.0.2",
"optimize-css-assets-webpack-plugin": "^1.3.0",
"ora": "^1.1.0",
"rimraf": "^2.6.0",
"sass-loader": "^6.0.3",
"semver": "^5.3.0",
"shelljs": "^0.7.7",
"url-loader": "^0.5.7",
"vue-loader": "^12.2.1",
"vue-style-loader": "^2.0.0",
"vue-template-compiler": "^2.3.4",
"webpack": "^2.2.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.16.1",
"webpack-merge": "^2.6.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
webpack+vue-cil 中proxyTable配置接口地址代理
在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可:
dev: {
// 静态资源文件夹
assetsSubDirectory: 'static',
// 发布路径
assetsPublicPath: '/',
// 代理配置表,在这里可以配置特定的请求代理到对应的API接口
// 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'
// 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
'/api': {
target: 'http://xxxxxx.com', // 接口的域名
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
pathRewrite: {
'^/api': ''
}
}
},
// 本地访问 http://localhost:8080
host: 'localhost', // can be overwritten by process.env.HOST
接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api, 因此接口地址需要写成这样的即可生效 /api/save/index。
注意: '/api' 为匹配项,target 为被请求的地址,因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。
常见示例如在 :https://github.com/bailicangd... 这里加
proxyTable: {
// '/pre-web': 'http://118.24.153.55/' // 线上
'/pre-web': 'http://118.24.153.56' // 测试
// 'pre-web': 'http://118.24.153.57' // 本地服务器
},
单页面的多页面切换
按需加载
参考
《vue实战》
vue-loader: https://vue-loader.vuejs.org/...
https://www.jianshu.com/p/f05...
https://www.cnblogs.com/tugen...
http://vuejs-templates.github...