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

一、拿到一个项目

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 中相关的文件，