Webpack入门搭建Vue环境看这篇就够了

1⃣️、网页中引入的静态资源多了会有什么问题？

• 网页加载速度慢 会发起很多的二次请求
• 要处理错综复杂的依赖关系

1.1 解决方案

合并、压缩、精灵图、icon字体图标、图片的Base64编码...
使用requireJS、webpack解决各个包之间的复杂依赖关系...

2⃣️、什么是webpack？

Webpack是前端的一个项目构建工具，基于node开发出来的一个前端工具，把前端开发中用到的所有资源都变成浏览器可以识别的资源。

3⃣️、起步

• 安装webpack
  sudo npm install webpack -g (全局安装)
• 初始化项目
  npm init -y
• 新建webpack配置文件夹

  webpack-demo
  |- /dist
    |- index.html
  |- /src
    |- index.js
  |- package.json
+ |- webpack.config.js

• 编写webpack配置

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

// 暴露出去
module.exports = {
  // 打包入口 (表示webpack要打包的文件)
  entry: './src/index.js',
  // 打包出口 (打包至哪个文件)
  output: {
    // 打包后的文件名
    filename: "bundle.js",
    // 打包后的路径
    path: path.resolve(__dirname, "dist")
  }
};

• 执行打包命令 按照webpack.config.js文件中的配置打包
  npx webpack --config webpack.config.js
• 配置快速命令
  在package.json文件夹中的scripts中配置一个键值对
  "dev": "npx webpack --config webpack.config.js"
  终端直接输入npm run dev即可打包
• 配置开发服务器 实时重新打包加载
  下载
  npm install --save-dev webpack-dev-server
  修改webpack.config.js配置文件，告诉开发服务器(dev server)，在哪里查找文件

module.exports = {
    ...
+   // 开发服务器
+   devServer: {
+     // 网站根目录 类比与 apache www目录
+     contentBase: './dist'
+   },
  }

• 打包css
  下载
  npm install --save-dev css-loader
  配置规则

module.exports = {
  ...
  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: [ 'style-loader', 'css-loader' ]
+      }
+    ]
  }
}

• 打包less
  下载
  npm install --save-dev less-loader less
  配置规则

module.exports = {
    ...
    module: {
+        rules: [{
+            test: /\.less$/,
+            use: [{
+                loader: "style-loader" 
+            }, {
+                loader: "css-loader" 
+            }, {
+                loader: "less-loader"
+            }]
+        }]
    }
};

• 打包Vue
  下载
  npm install -D vue-loader vue-template-compiler
  配置

// 导入Vue编译
+ const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
+     // 配置vue文件打包
+      {
+       test: /\.vue$/,
+        loader: 'vue-loader'
+      }
    ]
  },
+  plugins: [
+    // 请确保引入这个插件！
+    new VueLoaderPlugin()
  ]
}

• 启动项目
  npm run serve

项目基本结构

GitDemohttps://github.com/LanHai1/webpack-vue