/* 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.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-plugin3. webpack好处总结： 3.1：能够处理静态资源的 依赖关系 3.2：能够优化项目代码，比如：压缩合并文件，把图片转为base64编码格式 3.3：能够把高级的语法转为低级的语法 3.4：webpack 能够转换一些模板文件如：'.vue'文件
/*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并没有存放到实际的物理磁盘， 而是托管到了内存中！托管的路径是项目的根目录,所以要像如下引用： (暂未复现相对路径和绝对路径的区别) 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未完待续