webpack从0开始搭建以及使用webpack搭建vue项目

在vue中我们运行npm run build就能打包我们的项目，vue底层其实用的就是webpack在进行打包文件

webpack可以使我们的项目工程化，打包文件，将多个文件进行压缩，减少文件的数量，同时也就减少了请求的次数，也可以转换代码，将一些高级的语法转换为浏览器能够直接识别的语法。

1.从0开始搭建webpack

• mode：模式，可以做环境的配置

• 入口：entry 类似于vue中的src/main.js

• 出口：output类似于vue中的dist

• 插件：plugins使用插件可以清除缓存，配置生成的public/index.html文件的格式等等

• devServer：开发者服务器配置类似于vue中的vue.config.js

• loader：可以用来解析项目中的一些高级的语法，比如es6,scss,less,stylus,ts,jsx等等浏览器不能识别的高级语法

2. webpack配置

2.1项目结构

在webpack版本4以上，我们可以使用0配置，也就是不需要额外的添加配置，使用默认的配置，就可以打包项目，默认的配置下，默认的入口是src/index.js，默认的出口就是dist/main.js，运行的命令如下

webpack --mode=production/development // 但入口
webpack ./src/one.js ./src/two.js --mode development // 多入口文件打包到一个文件中
webpack ./src/one.js ./src/two.js --mode development --output dist/main.js // 多入口打包，改变出口文件名称

2.2安装webpack

npm 中指令的区别

-S:即–save（保存）,包名会被注册在package.json的dependencies里面，在生产环境下这个包的依赖依然存在。
-D:即–dev（生产），包名会被注册在package.json的devDependencies里面，仅在开发环境下存在的包用-D，如babel、sass-loader这些解析器

npm i webpack webpack-cli -S

2.3基本配置

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin') // 打包html文件
// const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  mode: 'development', // production
  entry: { // 入口文件
    app: './src/index.js'
  },
  output: { // 出口文件
    path: path.resolve(__dirname, './') + '/dist',
    filename: '[name].main.js', // app.main.js
    publicPath: '/' // 引入的文件都是已绝对路径的形式引入
  },
  plugins: [ // 使用的插件
    new CleanWebpackPlugin(), // 每次打包前先清除dist目录
    new HtmlWebpackPlugin({ // 用来配置public/index.html
    // 这里面的配置选项还很多，这里举几个最基本的例子
      template: './public/index.html', // 指定模板的路径
      hash: true, // 为js文件增加后缀，防止有缓存
      minify: {
        removeAttributeQuotes: true, //去除引号
        removeComments: true, //去除注释
        // collapseWhitespace: true // 代码折叠去除空格，因为去除注释之后，会留下一个空行
      }
    })
  ]
}

• 如果是多入口，单出口，entry为一个数组，数组中的元素就是入口文件的路径
• 如果是单入口，单出口，entry值为入口文件的路径，出口文件的filename直接写生成的文件名
• 如果是多入口，多出口文件，则按照以上的写法，entry为一个对象，output的filename可以添加[name]属性来区分

注：单入口单出口也是多入口多出口的一种，为了可扩展，我们将他写为多入口多出口的形式

2.4打包命令

可以直接运行webpack，也可以在package.json文件中添加script选项，配置命令

script: {
    'build': 'webpack'
} // 运行命令，npm run build

2.5loader解析器

如果我们想要import './src/scss/main.js’这种形式引入css，scss，less，stylus，js等等文件，我们就需要使用loader解析器

配置css

npm i style-loader -D // 安装基本模块
npm i css-loader -D 
npm i node-sass sass-loader -D
npm i less less-loader -D 
npm i stylus stylus-loader -D
npm i @babel/core babel-loader -D // 转换js
npm i vue-loader -D // 解析vue文件
npm i file-loader url-loader -D // 如果样式中有背景图片，使用解析器可以直接将图片转为base64的格式引入

module: {
    rules: [ // 记载特殊文件的处理
      {
        test: /\.css$/, // 以css文件为结尾的模块
        // 加载css模块 然后将css放置到style标签中
        // cnpm i style-loader css-loader -D
        loader: ['style-loader', 'css-loader']
      },
      {
        test: /\.scss$/,
        // cnpm i node-sass sass-loader -D
        loader: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.less$/,
        // cnpm i less less-loader -D
        loader: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.stylus$/,
        // cnpm i stylus stylus-loader -D
        loader: ['style-loader', 'css-loader', 'stylus-loader']
      },
      {
        test: /\.js$/,
        // cnpm i @babel/core babel-loader -D
        loader: ['babel-loader'],
        // exclude: /(node_modules|public)/ // babel-loader不解析这些文件
      },
      {
        test: /\.vue$/,
        // cnpm i vue-loader -D
        loader: ['vue-loader'] // 解析.vue文件
      },
      { // 解析背景图片 --- 图片转为了 base64
        test: /\.(png|jpg|jpeg|gif)$/,
        use: [ // 解析器的另一种写法
          {
            loader: 'url-loader', //解析背景图片
            query: {
              limit: 1024000, // 设置背景图片大小
              outputPath: 'img' // 指定背景图片存放的地址
            }
          }
        ]
      }
    ]
  },

2.6开发者服务器devServer

我们在vue项目中使用命令npm run serve 就能打开一个服务器访问，webpack中配置开发者服务器使用的是webpack-dev-server这个插件

首先安装插件
npm i webpack-dev-server -D
配置devServer
devServer: {
    open: true,// 运行成功之后打开默认的浏览器
    // 这里还可以配置很多的选项，但是我们一般使用默认的配置就够了
    proxy: { // 反向代理，用的很多
        '/api': {
            target: 'http://localhost:3000/api',
            ws: true,
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''
            }
        }
    }
}

3. webpack创建vue项目

3.1安装vue

安装vue模块
npm i vue -S
npm vue-template-conpiler vue-loader -D

3.2 配置vue中的缩写方式

在vue中我们可以用@代替根目录，也可以省略掉文件的后缀名，可以在webpack.config中配置

resolve: {
    extensions: ['.js', '.css', '.vue', 'scss'],
    alias: {
        '@': path.resolve(__dirname,'src')
    }
}

3.3配置vue解析器

npm i vue-loader -D
webpack.config.js中
module: {
    rules: [
        test: '/\.vue$/',
        loader: ['vue-loader'] // 相当于告诉
    ]
}

3.4vue项目结构

3.5vue中使用router

在src/router/index.js中配置简单的路由规则

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from '@/App.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/Cart',
    name: 'cart',
    component: () => import('@/views/Cart.vue')
  }
]
const router = new VueRouter({
  mode: 'hash',
  routes
})
export default router

3.6App.vue主组件内容

在src/App.vue主组件中

<template>
<div>
  {{message}}
  <router-view></router-view>
</div>
</template>
<script>
export default {
  data () {
    return {
      message: 'hello vue'
    }
  }
}
</script>

3.7index.js程序入口文件

在scr/index.js入口文件中

import './scss/main.scss' // 上文中module中配置了scss的解析器，因此scss文件可以直接import导入
import Vue from 'vue'
import router from '@/router/index.js' // 使用路由前先下载路由插件npm i vue-router -D
import App from './App.vue'
new Vue({
  router,
  render: h => h(App)
}).$mount('#app') // 绑定了public/index.html的<div id="app"></div>，并用App.vue内容替换div标签及其内容

3.8views下的其他组件

在src/views中创建首页以及购物车的组件

// 购物车
<template>
<div>购物车</div>
</template>
// 首页
<template>
<div>首页</div>
</template>

3.9配置开发者服务器

具体请查看2.6，我们也可以在package.json文件中配置script选项

script: {
    'serve': 'webpack-dev-server'
}// 开启服务器命令为 npm run serve,就会打开端口号为8080的服务器

4运行结果