Vue(小码哥王洪元)笔记04前端模块化，模块化规范，模块对象的导出和导入，webpack打包，配置，loader，处理less，css，图片，vue，抽取模板内容，插件，搭建本地服务器

最新推荐文章于 2024-05-15 01:52:39 发布

心湖中的石子

最新推荐文章于 2024-05-15 01:52:39 发布

阅读量2.5k

点赞数 8

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_43745804/article/details/112454402

版权

Vue 专栏收录该内容

48 篇文章 15 订阅

订阅专栏

1、前端模块化

通过对象导出一系列的对象属性，这个对象赋值个模型
导出模型对象

//导出了一个model对象
var model = (function () { 
  var obj = {};
  var name = 'zhangsan';
  var age = 21;
  function sum(num1, num2) { 
    return num1 + num2;
  }
  var flag = true;
  if (flag) { 
    console.log(sum(10,34));
  }
  obj.flag = flag;
  obj.sum = sum;

  return obj;
})();

使用模型对象

modelA.flag
modelA.sum()

2、成熟的模块化规范

CommonJS
AMD
CMD
ES6的Models

3、CommonJs

有两个核心，导出和导入
以下代码必须在node.js环境中才能实现。

1、CommonJS的导出

model.exports = {
  flag: true,
  test(a, b) { 
    return a + b;
  },
  demo(a, b) { 
    return a * b;
  }
}

2、CommonJS的导入

//commonJS模块
let{test,demo,flag}=require('moduleA');
//等同于
let _mA=require('moduleA');
let test=_mA.test;
let demo=_mA.demo;
let flag=_mA.flag;

4、ES6的模块化

在单独的一个文件（module.js）中编写模块脚本。
主页面中通过<script src=‘xxx.js’>导入模块
引入模块要使用type=‘module’说明src引入的是模块，可以避免命名冲突

<script src="modelA.js" type="module"></script>
<script src="modelB.js" type="module"></script>

案例：
1、创建模块moduleA

let name = 'xiaoming';
let age = 18;
let flag = true;

function sum(num1, num2) { 
  return num1+num2
}

if (flag) { 
  console.log(sum(20,30));
}

2、创建模块moduleB

let name = 'xiaoming';
let age = 18;
let flag = false;

function sum(num1, num2) { 
  return num1+num2
}

if (flag) {
  console.log(sum(20, 30));
} else { 
  console.log('can not print');
}

3、主页面导入模块
执行代码后，两个模块同名变量和方法互不干扰

<script src="vue.js"></script>
<script src="moduleA.js" type="module"></script>
<script src="moduleB.js" type="module"></script>

5、模块之间的export导出和导入对象

导出格式：

方式1：

 export { name,age,flag,sum}

方式2：

export let num1=1000；
export let height=1000；

方式3：使用export default，只能导出一个默认的
export default可以在导入的时候改变原变量的名字

//导出语法
export default function(){
  console.log('defualt');

}


//导入语法
improt myfun form ‘xxx.js’ //这里myfun是导入是重新命名导入的函数名

导入格式：

方法1

import{变量或方法，变量或方法} from ‘ 模块文件名’

方法2全部

 impor * from ‘xxx.js’//导入所有对象变量
使用时：
xxx.变量名

导出函数的格式

export function 函数名（参数列表）{
//业务逻辑
}

导出类的格式同函数类似

exportclass 函数名{
//业务逻辑
}

完整示范：

1、export导出对象
moduleA.js

let name = 'xiaoming';
let age = 18;
let flag = true;

function sum(num1, num2) { 
  return num1+num2
}

if (flag) { 
  console.log(sum(20,30));
}

export { name,age,flag,sum}

2、import导入对象
moduleB.js

import{flag,age} from './moduleA.js'
let name = 'xiaoming';

function sum(num1, num2) { 
  return num1+num2
}

if (flag) {
  console.log(sum(20, 30));
} else { 
  console.log('can not print');
}

6、webpack打包工具安装

模块化和打包
不仅js，css，图片，json等也都是可打包的
参照一下连接安装webpack ，其中webpack要使用淘宝的本地宝，因为外网被墙了
安装webpack

另一安装教程

安装webpack和webpack-cli时出现的问题

从node.js官网下载并安装node，一路“下一步”（傻瓜式安装）。

安装完成，打开cmd命令行工具，输入 node -v，查看版本号，则说明安装成功。
2.npm包管理器是集成在node中的，输入 npm -v，显示npm版本号
3.创建package.json文件，输入命令 npm init，一路enter，完后输入yes或Y，这样在工程目录下就会生成一个package.json文件（全局安装webpack）
4.安装webpack，输入命令 npm install webpack -g
5.安装 webpack 依赖，输入命令 npm install webpack --save-dev
6.检查webpack是否安装成功，输入 webpack -v，显示npm版本号，则webpack安装成功

二. 遇到错误：
解决：全局安装wepack-cli
输入命令：npm i -g webpack-cli

亲测有效的方法
以下均在cmd里面运行，此外需要安装nodejs，测试是版本为14.15.4最新版
npm版本为 :6.14.10

//设置安装目录
npm config set prefix “D:\Program Files\nodejs\node_global”
npm config set cache “D:\Program Files\nodejs\node_cache”
//连接国内镜像解决不能翻墙的问题
npm config set registry https://registry.npm.taobao.org
//安装webpack
npm install webpack -g
//安装webpack-cli
npm install webpack-cli -g
//降低webpack版本以适配webpack-cli
npm install webpack@4.30.0 -g
//降低webpack版本
npm install webpack-cli@3.3.2 -g
//打包模块–以开发模式
webpack ./src/main.js -o ./dist/bundle.js --mode development
//打包模块–以产品模式（与开发模式人选歧义）
webpack ./src/main.js ./dist/bundle.js --mode production

设置系统变量
NODE_PATH
值为：
D:\Program Files\nodejs\node_global\node_modules

系统变量设置环境变量
D:\Program Files\nodejs\node_global
D:\Program Files\nodejs\

打包后在dist目录下生成bundle.js

7、webpack打包实例

index.html
src | inf.js, main,js ,moduleA.js
dist

在这里插入图片描述

2、创建各个模块，同时导出若干对象
modulea.js模块

function add(a,b) { 
  return a + b;
}

function chen(a,b) { 
  return a * b;
}
//使用commonjs导出
module.exports = {
  add,
  chen
}

info.js模块

//使用es6方式导出
export const myname = 'zhangsan';
export const age = 18;
export const address = 'beijing';

3、创建用户导入的模块
main.js

 //使用commonjs模范导入
const { add, chen } = require('./modulea.js');
console.log(add(20, 30));
console.log(chen(20, 30));

//使用es6模范导入
import { myname, age, address } from './info.js';
console.log(myname);
console.log(age);
console.log(address);

4、使用webpack打包模块

webpack ./src/main.js  -o  ./dist/bundle.js --mode development

5、主页面文件导入模块文件bundle.js
index.html

<head>
    <script src="vue.js"></script>
    <script src="./dist/bundle.js"></script>
  </head>

6、调试结果

8、webpack配置

1、先在站点根目录下，在cmd中执行npm init命令，按照提示操作，最后在根目录下将生成package.json

{
  "name": "ex05",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

2、站点根目录下编写webpack.config.js文件
主要配置entry入口文件，以及出口文件，出口文件以对象的形式分成path部分和filename部分

//导入path模块
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    //path是通过node模块的path.resolve函数拿到，第一个参数是内置的文件夹名，第二个是目标文件夹，两个字符串进行了拼接
    path: path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
}

3、cmd下直接使用webpack进行打包
由于在webpack.config.js已经设置好了打包路径，因此可以省略掉原始路径和目标路径

webpack --mode development

9、使用npm run build进行打包

1、在上例的基础上修改package.json

修改scripts对象，添加build键，键值为webpack

**package.json**
{
  "name": "ex05",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    //添加一个键值，指向运行webpack
    "build":"webpack"

  },
  "author": "",
  "license": "ISC"
}

2、cmd里执行npm命令
但是这个指令没有办法选择开发模式或者产品模式，会报警告，但不影响

npm run build

10、webpack使用loader打包css文件

我这里css-loader和style-loader要降版本
要多webpack进行扩充才能打包css，图片等，使用不同的loader来处理不同的资源（css，图片等）

1、通过npm安装需要使用loader
需要降低css-loader版本
关于css-loader和style-loader版本号过高的问题的解决办法

npm i css-loader@3.2.0 -D

npm install --save-dev css-loader
npm install --save-dev style-loader

2、在webpack.config.js中的modules关键字下进行配置

//导入path模块
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    //path是通过node模块的path.resolve函数拿到，第一个参数是内置的文件夹名，第二个是目标文件夹，两个字符串进行了拼接
    path: path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  //导入cssloader
  module: {
    rules: [
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  }
}

3、编写css文件normal.css

 body{ background-color: aquamarine;}

4、main.js导入css文件

//使用commonjs模范导入

const { add, chen } = require('./modulea.js');
console.log(add(20, 30));
console.log(chen(20, 30));

//使用es6模范导入
import { myname, age, address } from './info.js';
console.log(myname);
console.log(age);
console.log(address);

//将依赖文件（css，图片等）引入进来，将其当做一个模块来使用
require('./css/normal.css');

5、相应package.json

{
  "name": "ex05",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "css-loader": "^3.2.0",
    "style-loader": "^1.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC"
}

大部分的loader我们可以在webpack的官网中找到，并且学习对应的用法
由于各种webpack，webpack-cli，css-loader，styleloader存在高版本不匹配的情况，需要降版本使用，去要去官网查看指定版本号，或者安装时根据提示选择相应版本号

css-loader :https://www.npmjs.com/package/css-loader
style-loader:https://www.npmjs.com/package/style-loader
点击versions，找到指定版本点击

11、webpack处理less文件

1、编写less文件special.less

@fontSize:50px;
@fontColor:orange;

body{
  font-size:@fontSize;
  color:@fontColor;
}

2、主入口模块文件main.js

//将依赖文件less引入进来
require('./css/special.less');

3、安装less-loader安装包

npm install --save-dev less-loader less

4、webpack.config.js上进行配置

//导入path模块
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    //path是通过node模块的path.resolve函数拿到，第一个参数是内置的文件夹名，第二个是目标文件夹，两个字符串进行了拼接
    path: path.resolve(__dirname,'dist'),
    filename:'bundle.js'
  },
  //导入cssloader
  module: {
    rules: [
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader:"style-loader"
          },
          {
            loader:"css-loader"
          },
          {
            loader:"less-loader"
          },
        ]
      }
    ]
  }
}

12、webpack使用url-loader处理图片

以上例为蓝本安装url-loader

1、安装url-loader开发时依赖

npm install --save-dev url-loader

2、配置webpack.config.js
其中options中的limit:12345意思是：
当加载的图片小于limit时会将图片编译base64字符串相识
当加载的图片大于limit时会将图片用fileloader模块进行加载
2.1因此需要再安装fileloader

npm install --save-dev file-loader

2.2修改output选项的publicpath到‘dist/’（必须）
2.3对图片进行命名规则调整（非必须）

格式为：

 name:'images/[name].[hash:8].[ext]'

name：打包文件名称
images：自定义打包文件夹路径
[name]：文件名
[hash8]：文件名附加一个哈希值（8位）以区分不同图片文件
[ext]：文件后缀名

//导入path模块
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    //path是通过node模块的path.resolve函数拿到，第一个参数是内置的文件夹名，第二个是目标文件夹，两个字符串进行了拼接
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js',
    publicPath:'dist/'
  },
  //导入cssloader
  module: {
    rules: [
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader:"style-loader"
          },
          {
            loader:"css-loader"
          },
          {
            loader:"less-loader"
          },
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
            //当加载的图片小于limit时会将图片编译base64字符串相识
			//当加载的图片大于limit时会将图片用fileloader模块进行加载
              limit:10192,
              //设置图片命名规范
              name:'images/[name].[hash:8].[ext]'
            }
          }
        ]
      },
    ]
  }
}

3、修改nornal.css文件
引入一张图片做背景图

body{ background-color: aquamarine; background-image: url("../images/gril09.jpg");}

4、最后打包到指定的文件夹指定的文件名（带哈希字符串）
在这里插入图片描述

13、使用babel进行ES6语法处理（ES6转ES5）

1、先安装babel-loader

npm install --sav-dev babel-loader@7 babel-core babel-preset-es2015

2、配置webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader"
          },
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10192,
              name: 'images/[name].[hash:8].[ext]'
            },
            
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower-components)/,
        use: {
          loader: 'babel-loader',
          options:{
            presets:['es2015']
          }
        }
      },
    ]
  }

14、webpack中配置vue

1、安装vue依赖

npm install vue --save

2、配置webpack.config.js解决vue runtime-only的问题
同时可参考这篇文章

resolve: {
    alias: {
      'vue$':'vue/dist/vue.esm.js'
    }
  }

完整如下：

 //导入path模块
const path = require('path');

module.exports = {
  entry: './src/main.js',
  output: {
    //path是通过node模块的path.resolve函数拿到，第一个参数是内置的文件夹名，第二个是目标文件夹，两个字符串进行了拼接
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js',
    publicPath:'dist/'
  },
  //导入cssloader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader"
          },
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10192,
              name: 'images/[name].[hash:8].[ext]'
            },
            
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower-components)/,
        use: {
          loader: 'babel-loader',
          options:{
            presets:['es2015']
          }
        }
      },
    ]
  },
  resolve: {
    alias: {
      'vue$':'vue/dist/vue.esm.js'
    }
  }
}

3、在main.js文件中引入vue依赖并使用vue开发

//引入vue依赖，使用vue进行开发
import Vue from 'vue'
const app = new Vue({
  el: "#app",
  data: {
    message:'hello webpack'
  }
});

4、在页面中引入vue模块，实现vue代码
注意budle.js的应用要放在id=app的div标签之后，否则提示找不到app。打包后，vue的入口不要在head标签内写

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  <div id="app">
    {{message}}
  </div>
  <script src="./dist/bundle.js"></script>
  </body>
</html>

15、现实中使用模块开发vue项目的基本情形

1、根据以上例子的配置在main.js中进行开发
在vue实例中直接写模板文件，这些模板对应html页面中的某个id。

//引入vue依赖，使用vue进行开发
import Vue from 'vue'
new Vue({
  el: "#app",
  template: `
    <div>
      <h4>{{message}}</h4>
      <button @click='btnClick'>click me</button>
      <h4>{{name}}</h4>
    </div>
  `,
  data: {
    message: 'hello webpack',
    name:'zhangsan'
  },
  methods: {
    btnClick() { 
      console.log('buttin is clicked');
    }
  }
});

2、html中仅仅写div标签作为容器加载main.js里创建的vue实例的模板

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  <div id="app">
  </div>
  <script src="./dist/bundle.js"></script>
  </body>
</html>

16、通过组件抽取模板内容完成vue的终极应用

1、创建一个组件
2、在vue实例中进行注册
3、在模板中应用

//引入vue依赖，使用vue进行开发
import Vue from 'vue';
const myapp = {
template: `
  <div>
    <h4>{{message}}</h4>
    <button @click='btnClick'>click me</button>
    <h4>{{name}}</h4>
  </div>
`,
  data() {//组件内的data必须是个函数，通过return返回
    return {
      message: 'hello webpack',
      name:'zhangsan'
    }
 
  },
methods: {
    btnClick() { 
      console.log('buttin is clicked');
    }
}
}

new Vue({
  el: "#app",
  template:`<myapp/>`,//模板引用app组件
  data: {
    
  },
  methods: {
   
  },
  components: {
    myapp//注册了一个app组件
  }
});

17、对vue代码进一步抽离

1、创建单独的vue的js文件myapp.js

单独的vue目录下创建myapp.js

export default {
  template: `
    <div>
      <h4>{{message}}</h4>
      <button @click='btnClick'>click me</button>
      <h4>{{name}}</h4>
    </div>
  `,
    data() {//组件内的data必须是个函数，通过return返回
      return {
        message: 'hello webpack',
        name:'zhangsan'
      }
   
    },
  methods: {
      btnClick() { 
        console.log('buttin is clicked');
      }
  }
}

2、只需要在main.js中引入这个myapp.js即可
这样就简化了main.js的内容

//引入vue依赖，使用vue进行开发
import Vue from 'vue';
import myapp from './vue/myapp.js';

new Vue({
  el: "#app",
  template:`<myapp/>`,//模板引用app组件
  data: {
    
  },
  methods: {
   
  },
  components: {
    myapp//注册了一个app组件
  }
});

18、进一步对模板进行抽离

1、引入vue-loader的依赖
由于本例需要将模板，脚本，样式都抽取到xxx.vue后缀的文件中，所以要引入vue-loader及vue-template-compiler的依赖

npm install --save-dev vue-loader vue-template-compiler

安装vue-loader最好安装13开头的版本，14版本以后需要单独插件。
方法是直接修改package.jason，然后配置“devDependencies”对象键值中的“vue-loader”：“^13.0.0”,再次执行上面的安装命令会在13大版本号里找最适合的loader版本

如果使用官网插件，就不要再纠结13这个大版本的配置，直接安装最新vue-loader即可

1.1在webpack.config.js中进行文件类型的配置
专门代码

  {
        test: /\.vue$/,
        use:['vue-loader']
      },

此外，由于vue-loader的各种问题，需要打官方插件需要配置如下:
同时：请参考这篇文章很好地解决的插件问题
01：设置一个VueLoaderPlugin插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

02：在插件库中注册这个插件

 plugins: [
    new VueLoaderPlugin()
  ]

完整代码

//导入path模块
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  entry: './src/main.js',
  output: {
    //path是通过node模块的path.resolve函数拿到，第一个参数是内置的文件夹名，第二个是目标文件夹，两个字符串进行了拼接
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js',
    publicPath:'dist/'
  },
  //导入cssloader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader"
          },
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10192,
              name: 'images/[name].[hash:8].[ext]'
            },
            
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower-components)/,
        use: {
          loader: 'babel-loader',
          options:{
            presets:['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use:['vue-loader']
      },
    ]
  },
  resolve: {
    alias: {
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new VueLoaderPlugin()
  ]
  
}

2、创建myapp.vue将模板及数据对象放入其中将原来myapp.js的模板及对象数据放入myapp.vue文件中

myapp.vue

<!--模板单独存放-->
<template>
  <div>
      <h4 class="title">{{message}}</h4>
      <button @click='btnClick'>click me</button>
      <h4>{{name}}</h4>
  </div>
</template>
<!--数据单独存放-->
<script>
export default {
  name:'myapp',
  data() {//组件内的data必须是个函数，通过return返回
      return {
        message: 'hello webpack',
        name:'zhangsan'
      }
   
    },
  methods: {
      btnClick() { 
        console.log('clicked');
      }
  }
}
</script>
<!--样式单独存放-->
<style scoped>
.title{ color:blue}
</style>

3、main.js重新引入myapp.vue文件
原来的myapp.js不再需要

//引入vue依赖，使用vue进行开发
import Vue from 'vue';
//import myapp from './vue/myapp.js';
import myapp from './vue/myapp.vue';
new Vue({
  el: "#app",
  template:`<myapp/>`,//模板引用app组件
  data: {
    
  },
  methods: {
   
  },
  components: {
    myapp//注册了一个app组件
  }
});

4、原有的html页面不动

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  <div id="app">
  </div>
  <script src="./dist/bundle.js"></script>
  </body>
</html>

19、认识webpack插件plugin

插件是对webpack现有功能的各种扩展，比如打包优化，文件压缩等
使用plugin要先通过npm安装（部分webpack已经内置，无需安装）在在webpac.config.js中进行配置

20、使用pluginBannerPlugin配置版权信息插件

1、webpack.config.js中添加

const webpack = require('webpack');

2、并创建版权插件

 plugins: [
    new VueLoaderPlugin(),//这个是vue-loader插件
    new webpack.BannerPlugin('版权归张三所有'),//这个是版权插件
  ]

完整代码

//导入path模块
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
module.exports = {
  entry: './src/main.js',
  output: {
    //path是通过node模块的path.resolve函数拿到，第一个参数是内置的文件夹名，第二个是目标文件夹，两个字符串进行了拼接
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js',
    publicPath:'dist/'
  },
  //导入cssloader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader"
          },
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10192,
              name: 'images/[name].[hash:8].[ext]'
            },
            
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower-components)/,
        use: {
          loader: 'babel-loader',
          options:{
            presets:['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use:['vue-loader']
      },
    ]
  },
  resolve: {
    alias: {
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.BannerPlugin('版权归张三所有'),
  ]
  
}

3、重新打包即可

21、使用HtmlWebpackPlugin打包html文件插件

需要将index.html文件打包到dist文件夹中
htmlwebpackplugin插件可以自动生成一个index.html文件。可以指定模板来生成
将打包的js文件，自动通过srcipt标签插入到body中

1、安装HtmlWebpackPlugin插件

npm install html-webpack-plugin --save-dev

2、配置webpack.config.js的plugins部分内容
·template表示根据什么模板来生成index.html
·需要删除之前在output中添加的publicPath属性，否则插入的script标签中的src可能会有问题

const HtmlWebpackPlugin = require('html-webpack-plugin');

plugin部分

plugins: [
    new VueLoaderPlugin(),
    new webpack.BannerPlugin('版权归张三所有'),
    new HtmlWebpackPlugin({
      template:'index.html'
    }),
  ]

全部配置

//导入path模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const webpack = require('webpack');
module.exports = {
  entry: './src/main.js',
  output: {
    //path是通过node模块的path.resolve函数拿到，第一个参数是内置的文件夹名，第二个是目标文件夹，两个字符串进行了拼接
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js',
    publicPath:'dist/'
  },
  //导入cssloader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader"
          },
          {
            loader: "less-loader"
          },
        ]
      },
      {
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10192,
              name: 'images/[name].[hash:8].[ext]'
            },
            
          }
        ]
      },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower-components)/,
        use: {
          loader: 'babel-loader',
          options:{
            presets:['es2015']
          }
        }
      },
      {
        test: /\.vue$/,
        use:['vue-loader']
      },
    ]
  },
  resolve: {
    alias: {
      'vue$':'vue/dist/vue.esm.js'
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new webpack.BannerPlugin('版权归张三所有'),
    new HtmlWebpackPlugin({
      template:'index.html'
    }),
  ]
  
}

3、修改首页index.html页面关于js的应用

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  <div id="app">
  </div>
  </body>
</html>

4、webpack.config.js中注销掉output中的publicPath项

module.exports = {
  entry: './src/main.js',
  output: {
    //path是通过node模块的path.resolve函数拿到，第一个参数是内置的文件夹名，第二个是目标文件夹，两个字符串进行了拼接
    path: path.resolve(__dirname,'dist'),
    filename: 'bundle.js',
    //publicPath:'dist/'
  },

5、webpack重新打包，在dist目录下生成indexhtml文件
这里自动引入了src=‘bundle.js’

#### 22、使用插件对js文件进行压缩(丑化) 1、使用uglifyjs-webpack-plugin并且制定版本号时期和cli2保持一致

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

2、webpack.congfig.js中进行相应配置

const UglifyWebpackPlugin= require('uglifyjs-webpack-plugin');

 plugins: [
    new VueLoaderPlugin(),
    new webpack.BannerPlugin('版权归张三所有'), 
    new HtmlWebpackPlugin({
      template:'index.html'
    }),
    new UglifyWebpackPlugin(),
  ]

3、webpack打包
发现bundle.js丑哭

22、使用webpack-dev-server搭建服务器

1、安装服务器模块

npm install --save-dev webpack-dev-server@3.8.2

2、devserver作为webpack中的一个选项，需要设置

contentBase：为哪一个文件夹提供本地服务，默认根文件夹，即“./dist”
port：端口号，默认8080端口
inline：页面实时刷新
historyApiFallback：在spa页面中，依赖html5的history模式

3、配置webpack.config.js文件

deserver：{
	contentBase:'./dist',
	inline:true
}

4、还需要在配置另外一个scripts
–open参数表示直接打开浏览器

"dev": "webpack-dev-server"

命令行cmd中输入：

webpack-dev-server

ps
强制指定安装webpack-dev-server3.8.2后顺利跑起来了，默认在8080端口，尽管依然报了一大堆错

参照这篇文章
效果，注意地址栏
在这里插入图片描述

23、抽离webpack配置

不想写了

心湖中的石子

关注

8
点赞
踩
29

收藏

觉得还不错? 一键收藏
3
评论
Vue(小码哥王洪元)笔记04前端模块化，模块化规范，模块对象的导出和导入，webpack打包，配置，loader，处理less，css，图片，vue，抽取模板内容，插件，搭建本地服务器

1、前端模块化
复制链接

扫一扫

专栏目录