webpack与vue的使用

一、建好文件目录

二、npm init 初始化项目

生成package.json
还可以使用 npm init -y 其中-y 是yes的意思，在init时省去了敲回车的步骤
注意：npm i 是安装包的命令，会根据你的命令行后缀是否加了 -g或者global判断，下载的包是放在全局的环境，还是当前package.json文件对应的node_module文件夹目录下

npm、cnpm的使用，与相关知识

三、安装 webpack 和 webpack-cli

1. 运行npm i webpack -g npm i webpack-cli -g全局安装webpack，这样就能在全局使用webpack的命令，但一般不推荐使用全局安装
2. 在项目根目录中运行npm i webpack --save-dev npm i webpack-cli --save-dev安装到项目依赖中（即局部安装），会生成 node_modules 文件夹，当在本地安装 webpack 后，能够从 node_modules/.bin/webpack 访问它的 bin 版本。
3. 使用npx命令代替npm执行webpack的打包动作，或使用 node_modules/.bin/webpack命令构建

在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。
这就意味着如果你webpack和webpack-cli是局部安装的，想要使用webpack命令必须进入node_modules/.bin/webpack才能执行webpack命令，.bin目录包含的是一系列可以执行的命令，但是如果你是全局安装的webpack-cli，就不需要进入bin目录，webpack就能够寻找到它的命令路径了

由于版本变动，webpack和webpack-cli的安装有些不一样，还需再探讨
https://segmentfault.com/a/1190000013699050?utm_source=tag-newest
如何正确彻底删除与安装webpack 全局或是局部？
注意：在全局安装webpack后，最好在项目中也安装webpack

npm install module_name -S 即 npm install module_name --save 写入dependencies
npm install module_name -D 即 npm install module_name --save-dev 写入devDependencies
npm install module_name -g 全局安装(命令行使用)
npm install module_name 本地安装(将安装包放在 ./node_modules 下)
npm install -S -D -g 有什么区别

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

在第三步直接执行webpack命令，会报一些错误，因此需要先配置一下执行webpack命令的配置文件

   // 导入处理路径的模块（node中处理路径的模块）
    var path = require('path');

    // 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，
    // 并读取这个文件中导出的配置对象，来进行打包处理
    module.exports = {
    	mode: 'production',	 			// [webpack执行模式](https://www.cnblogs.com/leinov/p/10039173.html)
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        }
    }

在项目中
此时执行webpack命令，就会生成出口文件bundle.js

五、安装webpack-dev-server 实现实时打包构建

1. 执行npm i webpack-dev-server -D 局部安装
2. 在package.json中配置"script"节点，使在命令行中执行 npm run dev 时可以自动调用局部安装的webpack-dev-server
   注意：运行webpack-dev-server时，局部必须已安装好webpack，这也是为什么建议局部安装webpack的原因之一。

六、安装html-webpack-plugin插件配置启动页面

1. 运行cnpm i html-webpack-plugin --save-dev安装到开发依赖
2. 修改webpack.config.js配置文件如下：

    // 导入处理路径的模块
    var path = require('path');
    // 导入自动生成HTMl文件的插件
    var htmlWebpackPlugin = require('html-webpack-plugin');

    module.exports = {
        entry: path.resolve(__dirname, 'src/js/main.js'), // 项目入口文件
        output: { // 配置输出选项
            path: path.resolve(__dirname, 'dist'), // 配置输出的路径
            filename: 'bundle.js' // 配置输出的文件名
        },
        plugins: [ // 添加plugins节点配置插件
            new htmlWebpackPlugin({
                template:path.resolve(__dirname, 'src/index.html'),//模板路径
                filename:'index.html'//自动生成的HTML文件的名称
            })
        ]
    }

注意：只有plugins是复数，且其是中括号[]
3. 将index.html中script标签注释掉，因为html-webpack-plugin插件会自动把bundle.js注入到index.html页面中！
4. 实现自动打开浏览器、热更新和配置浏览器的默认端口号，修改package.json的script节点如下，其中--open表示自动打开浏览器，--port 4321表示打开的端口号为4321，--hot表示启用浏览器热更新：

"dev": "webpack-dev-server --hot --port 4321 --open"

七、下载loader实现webpack打包各种类型的文件

1. 下载各类loader

npm i style-loader css-loader --save-dev			//css
npm i less-loader less -D
npm i sass-loader node-sass --save-dev
npm i url-loader file-loader --save-dev				//css中的路径
npm i 		//babel处理高级语法loader包

bael升级到7.x的用法
2. 修改webpack.config.js配置文件

module: { // 用来配置第三方loader模块的
        rules: [ // 文件的匹配规则
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },   //处理css文件的规则
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=43960' },			
            // `limit`指定进行base64编码的图片大小；只有小于指定字节（byte）的图片才会进行base64编码
             { test: /\.(png|jpg|gif|ttf|svg)$/, use: 'file-loader' },
             // 解析文字、图片格式
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
        ]
    }

注意：use表示使用哪些模块来处理test所匹配到的文件；use中相关loader模块的调用顺序是从后向前调用的；
3. 在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

八、vue的安装与配置

1. 运行cnpm i vue -S将vue安装为运行依赖；
2. 运行cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖；
3. 在webpack.config.js中，添加如下module规则：

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

4. 创建App.vue组件页面：

    <template>
      <!--注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->
      <div>
        <h1>这是APP组件 - {{msg}}</h1>
        <h3>我是h3</h3>
      </div>
    </template>

    <script>
    // 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为
    // 需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象
    export default {
      data() {
        return {
          msg: 'OK'
        }
      }
    }

    </script>

	<!-- 通过scoped属性，将CSS的改变确定到这个组件上--!>
    <style scoped>
    h1 {
      color: red;
    }
    </style>

5. 创建main.js入口文件：

    // 导入 Vue 组件
    import Vue from 'vue'

    // 导入 App组件
    import App from './components/App.vue'

    // 创建一个 Vue 实例，使用 render 函数，渲染指定的组件
    var vm = new Vue({
      el: '#app',
      render: c => c(App)
    });

6. 安装插件 npm i vue-loader-plugin -S
7. 在配置文件webpack.config.js中添加

const VueLoaderPlugin = require("vue-loader/lib/plugin")

module.exports = {
	plugins: [
		new VueLoaderPlugin()
	]
}

8. 在使用webpack构建的Vue项目中使用模板对象

在webpack.config.js中添加resolve属性：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }

vue路径优化之resolve的使用
9. 安装配置vue-router路由模块npm i vue-router
在要使用路由的文件中添加

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

九、遇到的问题

1. 文件太大，重新配置
2. 安装chrome插件vue-devtools时，没有vue控制台，修改webpack配置文件即可

mode: 'devlopment‘,