资源多，请求多可以利用webpack打包工具，把很多js文件打包到一个js文件里
1. 安装
1,1 全局安装 npm install webpack -g 全局用的是自己电脑安装的webpack，如果放到别人电脑可能就无法打包了
1,2 局部安装 ( 推荐 ) npm i -D webpack 安装到项目中,需要通过配置 package.json, 的'scripts': { "bulid":"webpack","start":"node ./src/main.js" } npm run bulid 来打包
然后将打包好的js文件引入页面中就可以了
npm init -y 配置出package.json
2. 打包
2.1 webpack 入口文件模块路径 出口文件模块路径
如果不想每次都写 入口和出口文件路径
可通过配置 webpack.config.js 该文件其实最终是要在node环境下执行的
里面写 const path = require('path');
module.exports = {
entry: './src/main.js' , //入口文件模块路径
output: {
path:path.join(__dirname,'./dist/') , // 出口文件模块所属目录，path必须是一个绝对路径
filename: 'bundle.js' // 打包的结果文件名
}
}
配置好后直接 webpack 就可以打包了
3. 如果要打包CSS文件
3.1 安装依赖： npm install --save-dev style-loader css-loader
3.2 在webpack.config.js配置 参考官方文档 https://webpack.js.org/guides/asset-management/#loading-css
3.3 在main.js中写 import "./main.css" 除了js可以省略后缀名外，其他都要后缀名
3.4 npm run build
解释： 也是把CSS打包成js，然后在运行js文件的过程中，会动态地创建style标签插入到head中
4. 如果要打包图片
4.1 npm install --save-dev file-loader
打包结束后，如果index.html在根目录直接运行的话，那么图片资源这些路径就无法访问到了。
解决方案就是把index.html放到dist目录中。但是 dist 是打包编译的结果，而非源码，所以把index.html放到dist就不合适
综合来说：我们最好用一个插件：html-webpack-plugin来解决
① 安装依赖 npm i -D html-webpack-plugin
② 在webpack.config.js中
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins:[ // 该插件的作用就是把index.html 打包到你的 bundle.js文件所属目录
//就是说你打包的js文件在哪，index.html就到哪
//同时也会在index.html页面中自动引入你打包的js文件，不用手动加
//这个插件还可以配置压缩html的处理
new htmlWebpackPlugin( { template :'./index.html ' })
],
}
6. webpack-dev-server
每次手动打包很麻烦，而且即便有 --watch也不方便，还需要自己手动刷新浏览器， 它可以实现监视代码改变，自动打包，打包完毕自动刷新浏览器的功能
6.1 安装依赖 npm i -D webpack-dev-server
6.2 ①webpack-config.js配置： ② package.json 配置：
6.3 npm run dev
7.babel-polyfill （提供低版本浏览器不支持的API）
npm install --save-dev babel-polyfill
在webpack.config.js中配置 entry: ['babel-polyfill','./src/main.js'],
这样的话就会在打包的结果中提供一个垫脚片用以兼容低版本浏览器不支持的API
8. 配置 babel-plugin-transform-runtime 来解决代码重复问题
在打包过程中，babel会给某些包提供一些工具函数，而这些工具函数可能会重复的出现在多个模块中，
这样的话会导致打包体积过大，所以babel提供了一个babel-transform-runtime来解决这个打包体积过大的问题
8.1 安装依赖 npm install babel-plugin-transform-runtime --save-dev
npm install babel-runtime --save
在webpack.config.js 配置 options :{ presets:['env'], plugins:['transform-runtime'] }
9. 打包 .vue单文件组件
9.1 npm i -D vue-loader vue-template-compiler
9.2 在webpack.config.js配置
module:{
rules:[
{
test: /.vue$/,
use: [
'vue-loader'
]
}
]
}
开启 babel-loader的缓存功能节省编译时间 在options:{ cacheDirectory:true, }
10. 打包第三方包
比如 npm i jquery
在main.js中 import $ from 'jquery'
在index.html script src jquery 引用文件资源的时候以打包后的最终的index.html所在的路径为准
在webpack.config.js externals: { jquery:"jQuery" }, jquery（key）就是包名，jQuery（value）是全局jQuery导出的接口
11. --save和--save-dev的区别
我们把开发工具相关的依赖信息保存到devDependencies, 把核心依赖的依赖信息保存到dependencies选项中
这样做的话，就是把开发依赖和核心依赖分开，因为开发依赖在打包结束后上线的话就不需要了
最后项目上线，我们真正需要的是dependencies依赖项中的包。
我们可以通过命令来只安装dependencies依赖项中的包 npm install --production
webpack.config.js 中 devServer:{contentBase:'./' }, index.html的引入文件路径该怎么写怎么写，
上线发布的时候，把核心依赖安装到当前index.html打包的结果目录中
12. vue的工程
main.js里： import Vue from 'vue'
import App from './App.vue'
new Vue({
el:"#app",
template:'<App />' 或 '<app></app>', 这个会替换掉index.html里的<div id="#app"></div>
components:{ App}
}
)
App.vue里
<template>
<div id="app"> <h1>Root Component!</h1> </div>
</template>
<script>
export default {};
</script>
<style scoped> //scoped让样式只在当前组件有效，子组件无效
</style>
网友评论