用webpack手动Vue搭建脚手架《一》

webpack 就是一个打包工具。

1. 创建项目，在根目录行下运行 npm init -y 命令， 初始化包管理配置文件 package.json
2. 新建src 文件夹 --> 建index.html 以及 index.js （ES6模块化语法导入 规定要用import ~ from ~）
   index.html 文件

<ul>
  <li>happy111</li>
  <li>happy222</li>
  <li>happy333</li>
  <li>happy555</li>
</ul>

index.js文件

import $ from 'jquery'
$(function() {
    $('li:odd').css('backgroundColor', 'blue')
    $('li:even').css('backgroundColor', 'lightblue')
})

3.运行 npm install jquery -S 命令，安装 jQuery 。
这样就可以实现我们想要的页面效果了。
但是可以更好，更快，那就需要webpack 来进行打包
1.运行 npm install webpack webpack-cli -D 命令，安装 webpack 相关的包
2.在根目录建 webpack.config.js 来配置webpack

module.exports = {
     mode: 'development' // mode 用来指定构建模式 
}

3.在 package.json 配置文件中的 scripts 节点下新增dev脚本

"scripts": {
 "dev": "webpack" 
}

4.npm run dev 启动 webpack 进行项目打包 会自动生成 dist文件夹 将文件自动打包在dist下的main.js中 。 在index.html中由原先的**<script src="./index.js"</script>** 改为 **<script src="../dist/main.js"></script>**
这样又回到的我们的页面 我们还可以自己定义打包的文件名

1. 打包默认的入口是 src 文件夹下的index.js， 默认出口是dist 文件夹下的 main.js。当然我们也可以进行改动，需要在webpack.config.js 文件中自定义入口和出口文件

const path = require('path')
module.exports = {
  entry: path.join(__dirname, './src/index.js'), // 入口
  output: {
    path: path.join(__dirname, './dist'), // 出口
    filename: 'bundle.js' // 输出文件的名称
  }
}

2. 我们改动了出口文件名 所以 要将index.html 中再由原先的 **<script src="../dist/main.js"></script>**改为**<script src="../dist/bundle.js"></script>**

***这样再一次回到的我们的页面 我们还可以让其自动打包，不用 npm run dev ***
1.npm install webpack-dev-server -D 自动打包工具
2 当但我们还需要做些配置 到package.json里 改动

"scripts": {
 "dev": "webpack-dev-server" 
 }

3.自动打包的bundle.js文件它不存在项目路径，它在内存中，

**<script src="/bundle.js"></script>** 

4 npm run dev 命令，重新进行打包，在默认端口 http://localhost:8080 可看自动打包效果。
此时我们不能直接看到我们的index.html页面，因为index.html在根目录下的src文件夹中。
所以我们可以 通过webpack-配置html-webpack-plugin生成预览页面
1.npm install html-webpack-plugin -D 命令，安装生成预览页面的插件
2.webpack.config.js 文件头部区域，添加如下配置信息：

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html', // 指定要用到的模板文件
  filename: 'index.html' // 指定生成的文件的名称，该文件存在于内存中，在目录中不显示
})

3 webpack.config.js 文件中向外暴露的配置对象，新增如下配置节点

module.exports = {
plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表
}

每次都要手动复制url,访问太麻烦，配置如下，自动打开页面
1.在package.json中进行配置

 "dev": "webpack-dev-server --open "//用默认的8080端口
 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8000" //自定义端口为8000

通过webpack打包工具可以提高我们的效率，但是这样远远是不行的，我们写的代码不光有js还有其他文件样式（webpack默认自动打包js文件，并且是js文件的低级语法），此时我们就需要用到loader加载器 来进行打包。
好了，对于手动搭建Vue脚手架，做了简单的演示，下篇文章再完善loader的配置。