视频笔记：webpack+vue打造TODO应用

视频课地址：挺适合我这种webpack废柴的。还有建议两倍速

https://www.imooc.com/video/16403

我的学习方法：先是看一遍视频看到了2-3，然后重头看，边看边照着敲代码。有问题调试。最后一遍写笔记。保证自己看着这篇笔记能把整个看过的课串起来。

啊！啥时候我也能到了“出个课”的水平。这些老师都是男的语速也有点慢啊。话说最近看的B站影视剧评大UP主，也都是男的……也许等技术到了，改改啰嗦的毛病……嗯这辈子怕是不可能开课了……

1、新建文件夹后，先在该文件目录下执行：

~npm init

会生成一个package.json文件。

 

2、然后学习配置webpack和vue，就需要安装依赖包：(没有区分devdependence和dependence)

~npm i webpack vue vue-loader

 

3、会有一个这样的警告：npm WARN vue-loader@15.9.3 requires a peer of css-loader@* but none is installed. You must install peer dependencies yourself.

！*缺啥装啥就完了

~npm i css-loader //虽然没报错提示但是这里就可以安vue-template-compiler

 

4、新建文件夹src，里有文件app.vue。并写上模板内容

 

5、vue组件不能直接使用，所以需要配置webpack（新建个配置文件完事）把前端不同的资源打包。因为是整个js放到浏览器去渲染页面，所以需要用index.js作为入口文件

 

○新建webpack配置文件。webpack.config.js。这是“作为输入的js文件”，webpack会把输入的文件，包括该文件所依赖的包，都可以打包成完整的bundle.js文件，变成能够在浏览器里直接运行的代码。

 

把输入文件放到入口参数里，需要写绝对路径。

 

import path是必须的。为了设置entry和output嘛——输入指定文件，输出指定位置和文件名。__dirname这个参数就是是本文件（webpack.config.js)所在的绝对路径，join一下就是把路径和文件名拼接的意思。

 

○新建入口文件 index.js。导入所需的依赖，比如Vue啊app的。还有new一个Vue对象。把vue组件里的代码渲染&挂载。部分代码如下：（关键是想把注释贴出来，所以root定义没有贴代码）

new Vue({ render: (h) => h(APP)//h参数是vue里的create App参数。把App挂载到HTML里.App 来着vue文件。这是需要挂载的内容
 }).$mount(root)//这一步挂载到HTML节点。root就是被挂载的节点。来着body里的子节点

 

○配置package.json文件，添加build选项。——这样就能调用项目里的webpack。且如果直接在命令行输入webpack命令会调用全局webpack，可能和项目里的版本不一致。

 

webpack只支持js 的ES5语法，因为不认识vue，所以需要安装一些loader，去处理webpack不认识的语法的工具。因为vue-loader是 15之后的版本，需要安装一个叫做 VueLoaderPlugin 的插件.还需要配置css-loader。

const VueLoaderPlugin = require('vue-loader/lib/plugin')//vue-loader是 15之后的版本，需要这里①

loader咋配置嘞？上代码吧还是……

plugins:[ new VueLoaderPlugin()//vue-loader是 15之后的版本，需要这里② 
        ], 
module: {//帮助webpack去识别它不认识的语法 
    rules: [//这个参数是webpack3以后的还是咋？网上有人因为版本太新运行不了公司项目，把这个rules改为啥来就行。我忘了哈哈哈
             { 
                test: /\.vue$/,//检测文件类型。嘿！千万别加引号！别忘了转义符！ 
                loader: 'vue-loader'//webpack就有vue-loader来为webpack处理.vue文件类型                     
             },{//这里也得写上③ 
                test:/\.css$/, 
                use: ['style-loader', 'css-loader'] 
             },{//这个是处理图片的，demo项目开始可不加，但是谁公司项目还没个图片了？加，就完事 
                test: /\.(gif|jpg|jpeg|png|svg)$/, 
                use: [//这里的use数组为啥能加对象，因为每个loader都可以加配置项，上面CSS不需要所以直接数组了
                        { 
                            loader: 'url-loader',//一会别忘安该loader 
                            options: { 
                                        limit:1024,//限制大小 
                                        name: '[name]-aaa.[ext]'//设定名字，不然每个图都一个名闹心不 
                                      }  
                        }
                     ]
            },{//CSS预处理器 
                test: /\.styl/, 
                use: [ 'css-loader', 'stylus-loader' ] 
            },{ 
                test: /\.s[ac]ss$/i, 
                use: [ 'style-loader', 'css-loader', 'sass-loader' ] 
            } 
          ] 
        }

 

！注意：这里因为版本和细节问题报了好多回错，我差点要放弃。又特*的不甘心……最后终于找到症结所在，如释重负。

所以啊，“被代码整疯”与“代码世界舍我其谁”的感觉，相差也许不远。癫狂也在一念之间。尤其要是被算法虐一虐，啧啧。酸爽！

 

5、配置完了安装下，安好了再npm run build

~npm i vue-loader-olugin -s

 

还不能忘了安装

~npm i vue-template-compiler

 

6、再加上关于图片的处理，需要啥loader就安上

~npm i vue-style-loader url-loader file-loader

 

7、CSS预处理器，stylus

~npm i stylus-loader stylus

 

延伸到sass等的loader都可以这样引入。去webpack官网搜"相应名字-loader"就行

 

8、安装：

~npm i webpack-dev-server



~npm i cross-env (设置环境变量)

 

package.json里设置dev选项，就是关于dev-server的配置。

 

同时在webpack.config.json里设置。因为是前端项目所以target是web。还需要设置在开发环境和生产环境的不同的环境变量。

 

写上环境变量就可以在不同平台执行相同的脚本。（node和windows就不一样）

package.json

"build": "cross-env NODE_ENV=production webpack --config webpack.config.js", 
"dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js"

 

webpack.config.js

const isDev = process.env.NODE_ENV == development; 
if(isDev){ 
    config.devServer = {//webpack2以后 
                            port: 8080, 
                            host: '0.0.0.0',//可以通过本机IP来访问，比如可以用手机去链接电脑调试 
                            overlay: { 
                                        errors: true //这个可以把webpack打包后的错误输出到页面 
                                      } 
                        } 
}

 

package.json里设置的环境变量名全部存在于process.env对象里，可以设置多个变量名，都能取到。

 

之前webpack.config.js的一顿操作，什么设置输入和输出文件啊，配置loader啊的都放到config对象里。最后：

module.exports = config;

 

为啥放到一个对象config里嘞，还不是为了在开发环境下配置一些端口啥的，方便调试。如果是开发环境，给config添加一个属性叫devServer然后一顿操作……

 

注：视频笔记到2-3前半部分。待更新……