一周精通Vue（三）webpack、代码抽离

webpack

webcpak的核心有两个 一个是模块化 让我们可以进行模块化开发，并且会帮助我们处理模块之间的依赖关系 一个是打包 不仅仅是JavaScript文集 我们的css，图片，json文件等 在webpack中都可以被当做模块来使用 node -v 首先安装node 我这里安装的是10.15.3 

# 全局安装webpack npm install webpack@3.6.0 -g # 安装项目依赖 npm install webpack@3.6.0 -save-dev webpack -version # 查看webpack版本

• 打包

  在终端运行webpack命令时 都是使用全局的webpack 如果使用项目webpack 需要配置devDependencies

# webpack 命令打包指定文件 如果有依赖则自动继承依赖打包 webpack ./src/main.js ./dist/bundle.js 

• 配置

创建一个 webpack.config.js npm init # 初始化package.json配置文件 自动生成package.json文件 npm install # 安装package 自动生成 package-lock.json 

 // file: webpack.config.js const path = require('path'); module.exports = { // 打包入口文件 entry: './src/main.js', // 出口文件 output: { // 出口文件绝对路径 path: path.resolve(__dirname, './dist'), // 打包后的文件名字 filename: 'bundle.js' } };

loader

官方链接：https://webpack.js.org/loaders 

• css样式文件

# 1. 安装loader npm install --save-dev css-loader npm install --save-dev style-loader

const path = require('path'); module.exports = { // 打包入口文件 entry: './src/main.js', // 出口文件 output: { // 出口文件绝对路径 path: path.resolve(__dirname, './dist'), // 打包后的文件名字 filename: 'bundle.js' }, module: { rules: [ { test: /\.css$/i, // css-loader 只负责将css文件加载 // style-loader 负责将样式添加到dom中 // 这里配置顺序需要注意 是从后向前加载的 use: ['style-loader', 'css-loader'], }, ], }, };

• less 样式文件
  安装 less-loader
  npm install --save-dev less-loader less
• img 图片文件
  安装 url-loader
  npm install --save-dev url-loader

  安装 file-loader
  npm install --save-dev file-loader

• ES6 -> ES5 语法处理
  安装babel-loader
  npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置Vue

• 安装vue 添加运行时依赖
  npm install vue --save
• new Vue

// 使用vue进行开发 import Vue from 'vue' const vm = new Vue({ el: "#app", data: { msg: "Vue message!", }, methods: {} }); 

修改HTML

<div id="app"> {{msg}} </div>

• runtime-orly

  没有template功能 代码中 不能包含任何的template内容 

• runtime-compiler

  拥有template 代码中可使用 template代码内容 

• 解决runtime-orly报错

  指定runtime版本 

• 配置webpack.config.js

 resolve: { alias: { // 指定 在其他地方导入vue的时候 vue来自哪里 // 在node_modules/vue/dist/ 中 默认是 vue.runtime.esm.js 修改为 vue.esm.js 'vue$': 'vue/dist/vue.esm.js' } }

• el 和template的区别

  如果在Vue实例中写了 el 又写了template 那么 template会替换掉el挂载的元素 

• 安装 vue-loader
  开发依赖
  npm install vue-loader vue-template-compiler --save-dev

代码抽离

 src ├── css │   ├── narmal.css │   └── special.less ├── img │   ├── Ink\ Cloud.jpg │   └── timg.jpeg ├── js │   └── demo.js ├── main.js └── vue │ ├── App.vue │ └── Cpn.vue │ └── index.html │ └── package.json │ └── webpack.config.js │ └── dist │ └── node_modules

// file：webpack.config.js // 配置 loader const path = require('path'); module.exports = { // 打包入口文件 entry: './src/main.js', // 出口文件 output: { // 出口文件绝对路径 path: path.resolve(__dirname, './dist'), // 打包后的文件名字 filename: 'bundle.js', // 打包时动态修改文件加载地址 publicPath: 'dist/' }, module: { rules: [ { test: /\.css$/i, // css-loader 只负责将css文件加载 // style-loader 负责将样式添加到dom中 // 这里配置顺序需要注意 是从后向前加载的 use: ['style-loader', 'css-loader'], }, { test: /\.less$/, use: [ { loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS } ] }, { test: /\.(png|jpg|gif|jpeg)$/, use: [ { loader: 'url-loader', options: { // 当加载图片时 文件大小 小于limit时 会将图片编译成base64字符串形式 // 当加载图片时 文件大小 大于limit时 需要使用file-loader模块进行加载 limit: 9999, // 打包后文件的命名规则 // [name] 文件打包前的名字 // [hash:8] 截取8位hash值 // [ext] 扩展名 name: 'img/[name].[hash:8].[ext]' }, } ] }, { test: /\.js$/, // exclude 转换的时候排除的内容 exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['es2015'] } } }, { test: /\.vue$/, // vueloader use: ['vue-loader'] } ], }, resolve: { alias: { // 指定 在其他地方导入vue的时候 vue来自哪里 // 在node_modules/vue/dist/ 中 默认是 vue.runtime.esm.js 修改为 vue.esm.js 'vue$': 'vue/dist/vue.esm.js' } } }; 

file：main.js // 依赖js文件 import {name, age} from "./js/demo"; console.log(name); console.log(age); console.log('webpack package test!!!!!!!!1'); // 依赖css文件 require("./css/narmal.css"); // 依赖less文件 require("./css/special.less") document.write("<h1>前端谢广坤！</h1>") // 使用vue进行开发 // 导入vue import Vue from 'vue' // 依赖vue组件 .vue文件 import App from './vue/App.vue' const vm = new Vue({ el: "#app", template: "<App/>", components: { App }, methods: {} }); 

file: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> </div> <script src="./dist/bundle.js"></script> </body> </html> 

 file: App.vue <template> <div> <h2>my name is cpn </h2> <button @click="butClick">按钮</button> <h2>{{name}}</h2> <Cpn></Cpn> </div> </template> <script> import Cpn from './Cpn.vue' export default { name: "App", components: { Cpn }, data() { return { message: 'Hello word!', name: 'coder why' } } } </script> <style scoped> </style>

 file:Cpn.vue <template> <h1>大写的Cpn</h1> </template> <script> export default { name: "Cpn" } </script> <style scoped> </style>