当前Web开发面临的困境
1、文件依赖关系错综复杂
2、静态资源请求效率低
3、模块化支持不友好
4、浏览器对高级Javascript特性兼容程度较低
自动打包生成的出口文件没有放在物理磁盘上而是放在内存中
webpack.config.js
const path=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin');
const htmlPlugin=new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html'
})
const VueLoaderPlugin =require('vue-loader/lib/plugin')
module.exports={
mode:'development',
entry:path.join(__dirname,'./src/index.js'),
output:{
path:path.join(__dirname,'./dist'),
filename:'bundle.js'
},
plugins:[htmlPlugin,new VueLoaderPlugin()],
module:{
rules:[
{test:/\.css$/,use:['style-loader','css-loader']},
{test:/\.vue$/,use:['vue-loader']}
]
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="/bundle.js"></script>
</head>
<body>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
</ul>
</hr>
<div id="app"></div>
</body>
</html>
index.js
import $ from 'jquery'
import './index.css'
import Vue from 'vue'
import App from './components/App.vue'
$(function(){
$('li:odd').css('backgroundColor','yellow');
$('li:even').css('backgroundColor','lightblue');
})
const vm=new Vue({
el:'#app',
render:h=>h(App)
})
package.json
{
"name": "webpack_test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server",
"build":"webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"jquery": "^3.4.1",
"vue": "^2.6.11",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
},
"devDependencies": {
"css-loader": "^3.4.2",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^1.1.3",
"vue-loader": "^15.9.0",
"vue-template-compiler": "^2.6.11",
"webpack-dev-server": "^3.10.3"
}
}
执行npm run build后在dist目录下生成对应的项目