vue-webpack打包

目录

    什么是webpack?

          1.安装包  安装webpack

          2. 创建js文件

          3. 造package.json中配置命令  package.json

          4. 创建 webpack.config.hs

01-js打包

02--css打包 

03--配置插件 

04-vue打包

 App.vue

3.配置vue的loader 

 4.配置vue插件

 5.修改入口文件

 6.把public/index.html作为生成的index.html的模板

06--配置热更新

---

什么是webpack?       把模块进行打包，打包成浏览器能够识别的html/css/js       vue 模块化一个组件，一个模块       路由，vuex,axios模块化的方式       引入的js文件不能识别，怎么解决？         1.安装babel转换器，高版本的es6语法，转为能够识别的语法         2.打包 -> 不认识的js文件，转为浏览器能够识别的js文件         打包js文件           1.安装包  安装webpack           npm install webpack@4.32.2 webpack-cli@3.3.2 webpack-dev-server@3.5.1 -D-S           2. 创建js文件                 里面有对应的倒入导出的操作           3. 造package.json中配置命令  package.json                 "scripts":{                 }             "scripts":{               "start":"webpack --config webpack.config.js --mode development"             },             将来就可以通过， npm run start进行打包             --config webpack.config.js 打包的时候,           4. 创建 webpack.config.hs               直接在里面添加配置               // webpack的配置信息               // webpack的配置信息               const path = require('path');               module.exports = {                 // 入口文件                 // entry的路径地址，根据你自己的地址写                 entry:'./src/index.js',                 // 出口文佳                 // 想放在什么位置，就创建对应的目录名称 __dirname 当前文件夹 创建dist文件                 output:{                   path:path.resolve(__dirname,'dist'),                   filename:'bundle.js' // bundle 包文件，打包之后的文件                 }               }               npm run start               npm run dev

export default function foo(){
  console.log('foo');
} 

01-js打包

export default function foo(){
  console.log('foo');
} 

 bar.js

import foo from './foo'
export default function bar(){
  console.log('bar');
  foo()
}

index,js

import bar from './bar'
import "./css/index.css"
bar()
console.log('index');

02--css打包