webpack学习笔记、详细、vue从最简单的模块化一直演化到使用vue-cli创建的基本结构

本文链接：https://blog.youkuaiyun.com/weixin_48826306/article/details/111348088

1、使用webpack打包

1.1、首先安装node环境，使用node中的工具npm安装webpack

node.js 下载地址：http://nodejs.cn/download/

node.js安装教程：转载：https://blog.youkuaiyun.com/antma/article/details/86104068

1.2、安装webpack命令，-g 为全局安装

npm install webpack@3.6.0 -g

1.3、查看是否安装完成

webpack --version

1.4、目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wXq0sGOh-1608216131453)(webpack使用.assets/image-20201216183521120.png)]

info.js文件

export const name='Jie';
export const age=20;
export const height=1.88;

main.js文件

// 使用 commonjs的模块化规范
const {add, mul} = require('./mainUtil.js')

console.log(add(100, 200));

console.log(mul(100, 200));

// 使用ES6模块化规范
import {name, age, height} from './info.js'

console.log(name);
console.log(age);
console.log(height);

mainUtil.js文件

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

function mul(num1, num2) {
  return num1 * num2 
}

module.exports = {
  add,
  mul
}

index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

1.5、使用webpack打包文件命令，执行命令式要在进入到01-webpack文件夹下面

webpack ./src/main.js ./dist/bundle.js

1.6、使用webpack打包文件时出现：无法加载文件 D:\nodejs\node_global\webpack.ps1，因为在此系统上禁止运行脚本。

解决办法：

使用管理员身份启动vs code
执行：get-ExecutionPolicy，显示Restricted，表示状态是禁止的
执行：set-ExecutionPolicy RemoteSigned
执行：get-ExecutionPolicy，显示RemoteSigned 后再重新执行打包的命令
打包成功，打包成功后会在dist文件下面生成一个bundle.js文件，然后在index.html中直接引入bundle.js文件，就可以使用了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e7hALPot-1608216131462)(webpack使用.assets/image-20201216183423117.png)]

2、webpack配置

2.1、新建webpack.config.js 配置文件

// 使用node中的path包，要先执行 npm init命令
const path = require('path')

// 配置进口，出口
module.exports = {
  entry: './src/main.js',
  output: {
    // 这里需要动态获取项目dist的路径,__dirname就是当前项目dist前面的路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}
// 在package.json文件中的  "script" 中加入  "build": "webpack"    就是执行 npm run bulid 命令就是执行  webpack命令打包

2.2、在终端执行命令：npm init，会生成 package.json文件，才可以使用node中的包

2.3、再使用webpack打包就可以只用 webpack就可以

2.4、配置使用 npm run build 命令打包

在生成的package.json文件中 “script” 对象中加上 “build”: "webpack"后就可以在终端中使用 npm run build 命令进行打包，但是这种打包方式是首先使用的局部的环境变量进行打包，而使用webpack命令打包是使用的全局环境变量进行打包的，所以要在局部中也使用3.6.0的版本，执行命令

npm install webpack@3.6.0 --save-dev

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YvEu03bJ-1608216131484)(webpack使用.assets/image-20201216193319491.png)]

3、css-loader

3.1、安装css-loader，执行命令

npm install --save-dev css-loader
// 如果安装的css-loader版本过高可以使用2.0.2版本
npm install css-loader@2.0.2 --save-dev

3.2、引入css样式文件模块

require('./css/normal.css')
// 或者
import css from './css/normal.css'

3.3、在webpack.config.js中添加如下代码：

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

3.4、css-loader只负责将css文件进行加载，所以还需要安装style-loader

npm install style-loader --save-dev

module: {
    rules: [
      { 
        test: /\.css$/, 
        // css-loader只负责将css文件进行加载
        // style-loader负责将css样式添加到DOM元素中
        // 使用多个 loader时，是从右往左读取的，所以是 先读css-loader，再读的style-loader
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

4、less-loader

4.1、安装less-loader

npm install --save-dev less-loader less

4.2、在webpack.config.js中添加如下代码：

module: {
    rules: [
      {
        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
        }]
      }
    ]
  }

4.3、special.less文件

@fontSize: 50px;
@fontColor: purple;

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

4.4、main.js导入

import './css/special.less'

5、图片处理

5.1、normal.css文件中有两张背景图片

.boy {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* background-color: red; */
  background-image: url(../img/boy.jpg);
}
.girl {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* background-color: red; */
  background-image: url(../img/girl.jpg);
}

5.2、安装url-loader与file-loader（当加载的图片大小大于limit时需要file-loader）

//由于默认暗转时，有的版本过高，可以自己指明需要的版本
npm install --save-dev url-loader@2.0.0
npm install --save-dev file-loader@2.0.0

5.3、在webpack.config.js中的module里面加上配置，output里面加上一个publicPath才可以将dist文件中的打包后的图片显示出来

// 使用node中的path包，要先执行 npm init命令
const path = require('path')

module.exports = {
  entry: './src/main.js',
  output: {
    // 这里需要动态获取项目dist的路径,__dirname就是当前项目dist前面的路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      { 
        test: /\.css$/, 
        // css-loader只负责将css文件进行加载
        // style-loader负责将css样式添加到DOM元素中
        // 使用多个 loader时，是从右往左读取的，所以是 先读css-loader，再读的style-loader
        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)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载图片，小于limit时，会将图片编译成base64字符串的形式
              // 当加载图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              // 配置打包后生成的文件名字为原文件的名
              // [name]：表示源文件名字的变量，[hash:8]：生成的hash值只有8位，[ext]：表示生成的文件后缀为源文件的后缀
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}
// 在package.json文件中的  "script" 中加入  "build": "webpack"    就是执行 npm run bulid 命令就是执行  webpack命令打包

6、处理ES6语法

6.1、安装babel-loader

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

6.2、webpack.config.js配置

// 处理ES6语法，转换成ES5的语法
{
    test: /\.js$/,
        // exclude 排除
        // include 包含
        exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
            }
}

7、配置vue

7.1、安装vue

npm install vue --save

7.2、导入vue，并使用

// 使用Vue进行开发
import Vue from 'vue'

const app = new Vue({
  el: '#app',
  data: {
    message: "Vue使用成功啦"
  },
  methods: {}
})

7.3、在index.html添加一个id为app的div标签，挂载vue实例

注意，这里div标签一定要在引入bundle.js文件的标签之前，否则是无法把元素渲染到页面上的

7.4、打包后运行时报下面这个错误，需要在webpack.config.js中配置一个b别名alias，完整的vue文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tIBBadOf-1608216131493)(webpack使用.assets/image-20201217123515313.png)]

module.exports = {
  entry: './src/main.js',
  output: {
    // 这里需要动态获取项目dist的路径,__dirname就是当前项目dist前面的路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: 'dist/'
  },
  module: {
    rules: [
      // 处理css文件
      { 
        test: /\.css$/, 
        // css-loader只负责将css文件进行加载
        // style-loader负责将css样式添加到DOM元素中
        // 使用多个 loader时，是从右往左读取的，所以是 先读css-loader，再读的style-loader
        use: [ 'style-loader', 'css-loader' ]
      },
    ]
  },
  // 配置vue只runtime-only 出错
  resolve: {
    //alias:a 别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

8、使用vue模板

8.1、安装加载vue文件的（vue-loader）与解析vue模板编译的（vue-template-compiler）

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

8.2、配置vue-loader

// 配置vue
{
    test: /\.vue$/,
        use: {
            loader: 'vue-loader'
        }
}

8.3、代码

index.html

<body>
    <div id="app"></div>
    <script src="./dist/bundle.js"></script>
</body>

main.js

// 使用vue模板
import App from './vue/App.vue'
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
})

App.vue

<template>
  <div>
    <h2>{{message}}</h2>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue'
    }
  },
}
</script>
<style>

</style>

8.4、配置导入（import）文件的后缀名

import App from './vue/App'
import App from './vue/App.vue'

在webpack.config.js文件中resolve里面配置

resolve: {
    // 配置导入文件后缀名
    extensions: ['.css', '.js', '.vue'],
    //alias:a 别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
}

9、plugin

9.1、安装html-webpack-plugin与uglifyjs-webpack-plugin（压缩的一个插件）

npm install html-webpack-plugin@3.2.0 --save-dev
npm install uglifyjs-webpack-plugin@1.1.0 --save-dev

9.2、配置版权插件和自动生成index.html插件

// 配置版权信息
const webpack = require('webpack')
// 自动生成index.html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 丑化代码
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    // 这里需要动态获取项目dist的路径,__dirname就是当前项目dist前面的路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'   使用自动生成index.html的插件后就不需要拼接dist路径了
  },
  plugins: [
    new webpack.BannerPlugin("最终版权归reng所有"),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
    new UglifyjsWebpackPlugin()  // 压缩代码
  ],
}

10、搭建本地服务器

10.1、安装webpack-dev-server

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

10.2、配置devServer，在webpack.config.js的module下面

devServer: {
  contentBase: './dist',  // 根目录
  inline: true, // 在线更新
  // port: 8000  指定端口号
 }

10.3、配置执行命令 npm run dev

在package.json中 “scripts”: 里面添加一个， --open加上运行后直接打开

默认路径：http://localhost:8080/

"dev": "webpack-dev-server --open"

11、配置文件的分离

11.1、首先安装 webpack-merge

npm install webpack-merge@4.1.5 --save-dev

11.2、在项目目录下面创建一个build文件夹，里面存放配置文件，分别为，base.config.js，prod.config.js，dev.config.js

11.3、公共代码放在base.config.js文件中，配置文件分离后，需要将出口路径，就是打包后生成的文件地址更改为（…/dist），不然会直接生成在build文件夹下面

// 使用node中的path包，要先执行 npm init命令
const path = require('path')
// 配置版权信息
const webpack = require('webpack')
// 自动生成index.html文件的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    // 这里需要动态获取项目dist的路径,__dirname就是当前项目dist前面的路径
    path: path.resolve(__dirname, '../dist'),
    filename: 'bundle.js',
    // publicPath: 'dist/'   使用自动生成index.html的插件后就不需要拼接dist路径了
  },
  plugins: [
    new webpack.BannerPlugin("最终版权归reng所有"),
    new HtmlWebpackPlugin({
      template: 'index.html'
    }),
  ],
  module: {
    rules: [
      // 处理css文件
      { 
        test: /\.css$/, 
        // css-loader只负责将css文件进行加载
        // style-loader负责将css样式添加到DOM元素中
        // 使用多个 loader时，是从右往左读取的，所以是 先读css-loader，再读的style-loader
        use: [ 'style-loader', 'css-loader' ]
      },
      // 处理less文件
      {
        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
        }]
      },
      // 处理url路径图片
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 当加载图片，小于limit时，会将图片编译成base64字符串的形式
              // 当加载图片，大于limit时，需要使用file-loader模块进行加载
              limit: 8192,
              // 配置打包后生成的文件名字为原文件的名
              // [name]：表示源文件名字的变量，[hash:8]：生成的hash值只有8位，[ext]：表示生成的文件后缀为源文件的后缀
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      },
      // 处理ES6语法，转换成ES5的语法
      {
        test: /\.js$/,
        // exclude 排除
        // include 包含
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['es2015']
          }
        }
      },
      // 配置vue
      {
        test: /\.vue$/,
        use: {
          loader: 'vue-loader'
        }
      }

    ]
  },
  // 配置vue只runtime-only 出错
  resolve: {
    // 配置导入文件后缀名
    extensions: ['.css', '.js', '.vue'],
    //alias:a 别名
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
}
// 在package.json文件中的  "script" 中加入  "build": "webpack"    就是执行 npm run bulid 命令就是执行  webpack命令打包

11.4、开发配置文件dev.config.js，使用webpack-merge合并base.config.js配置文件

// 合并base.config.js配置文件
const WebpackMerge = require('webpack-merge')
// 导入公共配置文件
const BaseConfig = require('./base.config')

module.exports = WebpackMerge(BaseConfig, {
  devServer: {
    contentBase: './dist',   // 根目录
    inline: true,  // 在线更新
    // port: 8000    指定端口号
  }
})

11.5、生产配置文件prod.config.js

// 丑化代码
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin')
// 合并base.config.js配置文件
const WebpackMerge = require('webpack-merge')
const BaseConfig = require('./base.config')

module.exports = WebpackMerge(BaseConfig, {
  plugins: [
    new UglifyjsWebpackPlugin()  // 压缩代码
  ]
})

11.6、用webpack安装的很多包版本不兼容会报错，（“build”: “webpack --config ./build/prod.config.js”, “dev”: “webpack-dev-server --open --config ./build/dev.config.js”）这里就是由于将配置文件分离后，不需要webpack.config.js文件，所以在这里自己指定打包或者运行时用的配置文件。

package.json文件

{
  "name": "webpack-vue",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/prod.config.js",
    "dev": "webpack-dev-server --open --config ./build/dev.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^2.0.2",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.12.2",
    "less-loader": "^4.1.0",
    "style-loader": "^2.0.0",
    "uglifyjs-webpack-plugin": "^1.1.0",
    "url-loader": "^2.0.0",
    "vue": "^2.5.21",
    "vue-loader": "^13.0.0",
    "vue-template-compiler": "^2.5.21",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.3",
    "webpack-merge": "^4.1.5"
  },
  "dependencies": {
    "vue": "^2.5.21"
  }
}

11.7、App.vue

<template>
  <div>
    <h2>{{message}}</h2>
  </div>

</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      message: 'Hello Vue......'
    }
  },
}
</script>

<style>

</style>

11.8、index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

11.9、main.js

// 使用Vue进行开发
import Vue from 'vue'

// const app = new Vue({
//   el: '#app',
//   data: {
//     message: "Vue使用成功啦"
//   },
//   methods: {}
// })
// 使用vue模板
// import App from './vue/App.vue'
import App from './vue/App'
new Vue({
  el: '#app',
  components: {
    App
  },
  template: '<App/>'
})