blog项目搭建(记录文档)vue、webpack

1. 项目基础依赖

/*
1. 项目开发环境介绍：nodejs 安装nodejs 使用npm(包管理工具),来下载项目依赖
2. npm包管理工具：在开发中项目依赖于某个库，到下载压缩包再解压到项目路径过于繁琐,npm将源码统一放在官网上,并且关键npm下载的包如果依赖于另一个包,npm会根据依赖关系将所有的依赖都下载管理下来.
3. webpack打包工具

2. 项目开始

/*
1. 创建项目  npm init            // 创建package.json文件   记录项目使用的包及依赖关系
   常用安装命令：     npm install vue --save 或 -S        安装到项目本地的生产依赖
                     npm install vue --save-dev 或 -D    安装开发依赖
                     npm install vue --Save-D            (错误的~~这只能默认装到生产依赖)
                     
   .gitigonre文件创建       windows下  在更改文件名时输入'.gitignore.'系统会自动更改为'.gitignor'
    vscode设置忽略文件      用户设置中找到files.exclude  添加忽略文件

3.webpack介绍及使用

3.1为什么要使用webpack

/*
1. 使用场景：个人认为webpack的使用场景是在你使用框架，如vue要做一个单页面应用的项目时，
            各个组件(相当于各个页面)都存在css样式、js逻辑代码、UI层元素。而使用webpack
            可以达到将各个组件中的css、js、html打包生成对应的单个css、js、html文件，
           
2. webpack配置
     2.1配置加载器：在webpack配置中的loader(数组)中可以设置通过添加 加载器，来提供一些功能，
                  如：less-loader即less加载器、style-loader可以将各组件中的样式加载到页面上
                    
     2.2配置插件: 在webpack配置中的plugins关键字(数组)中,添加常用插件,如：html-webpack-plugin

3. webpack好处总结：
     3.1：能够处理静态资源的 依赖关系
     3.2：能够优化项目代码，比如：压缩合并文件，把图片转为base64编码格式
     3.3：能够把高级的语法转为低级的语法
     3.4：webpack 能够转换一些模板文件如：'.vue'文件 

3.2webpack的基本使用

/*
1. 安装：全局安装npm i webpack -g      
   本地安装：npm i webpack -D
   
2. webpack打包指令：webpack [输入文件路径]  [输出文件路径]
                   如： webpack ./src/main.js ./dist/bundle.js
                   
3. 配置webpack.config.js文件
   注：基于每次打包都要输入第二步过于繁琐的命令,所以可以直接在webpack.config.js文件中配置 '打包指令'
   第一步：新建配置文件webpack.config.js
   第二步：在配置文件中向外暴露配置对象,以便webpack执行时来读取配置对象(即导出配置模块)
       详细代码如下:
                      const path = require('path')
                      module.exports = {
                              entry: path.join(__dirname, './src/main.js'),
                              output: {
                                  path: path.join(__dirname, './dist'),
                                  filename: 'bundle.js' // 输出的文件名
                         }
                     }
   第三步：打包：直接打开cmd，在命令行中输入'webpack'即可实现打包
   
4. 实现webpack实时打包     
    注：每次修改完项目再重新打包还是太麻烦,所以~~~把懒发挥到极致吧吧吧~~~
    第一步：在项目本地安装(开发依赖) 'webpack-dev-server'工具,
    第二步：在package.json中添加配置
            "scripts": {
                "dev": "webpack-dev-server"
             }
    第三步：启动webpack-dev-server: npm run dev
           注：我在这一步运行npm run dev报错,
               解决：删除项目文件夹解决了,但原因目前不知道~~汗-_-||
               
           注：webpack-dev-server打包出来的bundle.js并没有存放到实际的物理磁盘，
             而是托管到了内存中！托管的路径是项目的根目录,所以要像如下引用：
               <script src="/bundle.js"></script>
             (暂未复现相对路径和绝对路径的区别)
               
5. 配置自动打开浏览器
     第一步：安装html-webpack-plugin
     第二步：在webpack.config.js中,导入插件
            代码：const htmlWebpackPlugin = require('html-webpack-plugin')
            
     第三步：在webpack.config.js配置对象中,添加plugins插件节点
             plugins: [
              new htmlWebpackPlugin({
                // 复制如下路径的文件为模板托管到内存中   会在index.html文件中自动引入main.js
                template: path.join(__dirname, './src/index.html'),
                filename: 'index.html'
              })
             ]
             
6. 配置加载器loader
         module: {
              rules: [
                  // 如下是几个必须安装的加载器
                  { test: /\.css$/, use: ['css-loader']},
                  { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
                   // babel-loader 加载器可以将es6语法转换为es5的语法
                  { test: /\.vue$/, use: 'vue-loader' },
                   // 加载'.vue'文件  对应的项目依赖包 vue-template-compiler
               ]
            }

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~2018.04.01----22:25:23未完待续