《前端》vue学习（六）上--webpack

一、拿到一个项目

vscode的终端调用键就是这两个Ctrl和波浪号

1、先用init管理起来：npm init -y（会产生package.json文件）

2、安装webpack-dev-server (实现自动打包js文件)

3、本地安装webpack

4、写配置文件：webpack.config.js (写打包的入口和出口文件)

5、在package.json的script节点下添加 "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"

6、安装html-webpack-plugin(自动在html页面的底部注入js文件，无需手动添加，如不安装这一插件，需要自己引入根目录下的bundle.js)

7、在webpack.config.js 中添加var htmlWebpackPlugin = require('html-webpack-plugin')  和

  plugins: [ // 所有webpack  插件的配置节点
    new htmlWebpackPlugin({
      template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
      filename: 'index.html' // 设置生成的内存页面的名称
    })
  ],

( 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点)

8、在main.js中引入css文件和image文件：

import './css/index.css'

import './css/index.scss'

import 'bootstrap/dist/css/bootstrap.css'。。。

// 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径
// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找

9、安装两个loader：style-loader和css-loader   （引入css文件）以及url-loader和file-loader（引入url文件）

  module: { // 配置所有第三方loader 模块的
    rules: [ // 第三方模块的匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loade