一、webstrom配置

https://blog.csdn.net/diligentkong/article/details/75040651
注意点：
1.安装了babel后可以看到安装位置，然后设置到webstrom的watcher setting的program里面

二、

教程：https://yq.aliyun.com/articles/646536

cnpm install -g vue-cli

报错：CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
但是CoffeeScript过时，可以不管

//vue init webpack <Project Name> 后报错：
1.npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. 
2.npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
3.npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
4.npm WARN deprecated flatten@1.0.2: I wrote this module a very long time ago; you should use something else.
5.npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

解决方法：（deprecated是已经弃用的，其实只要npm run dev成功，可以不管）
1. 安装beta版来适应webpack4：cnpm install -g extract-text-webpack-plugin@next
2....

如果按照教程到最后生成的dist文件夹，传到服务器后，打开网站发现404的话：
https://www.cnblogs.com/minigrasshopper/p/7879358.html

三、用vue做一个todo应用

视频教程&思路：https://www.imooc.com/video/16402
Github源码&操作：https://github.com/Xiao-Cuir/vue-webpack-todo
npm慢换cnpm镜像：https://www.cnblogs.com/wenjunwei/p/10078460.html

简化思路：
0.业务逻辑看视频教程，源码看github，下面主要列举所用到的工具
1.基础配置
打开根目录(例如D:\work\vue_webpack\todo)的命令行，初始化一个npm项目

npm init 

安装webpack 和 vue 以及他们的依赖

npm i webpack@3.10.0 vue@2.5.13 vue-loader@13.6.0 
npm i css-loader@0.28.7 vue-template-compiler@2.5.13 
其实vue vue-loader css-loader template-compiler不指定版本也行

书写app.vue和index.js
配置webpack.config.js和package.json
然后npm run build 就可以把app.vue和index.js打包成一个bundle.js

2.各种静态资源的加载
使用 url-loader和file-loader资源，stylus预处理CSS

npm i style-loader@0.19.1 url-loader@0.6.2 file-loader@1.1.6 
npm i stylus-loader@3.0.1 stylus@0.54.5 

配置webpack.config.js和package.json使工具生效

3.webpack-dev-server的配置

npm i webpack-dev-server@2.9.1
npm i cross-env@5.1.3

还需要引入一个html-webpack-plugin,用于将我们打包好后的js融入到我们的HTml中去

npm i html-webpack-plugin@2.30.1

配置webpack.config.js和package.json使工具生效
【ctr + c可以退出开发模式】

4.后处理css\自动加前缀\编译器

npm i post i postcss-loader@2.0.9 autoprefixer@7.2.3 babel-loader@7.1.2 babel-core@6.26.0
npm i babel-preset-env@1.6.1 babel-plugin-transform-vue-jsx@3.5.0
npm i babel-helper-vue-jsx-merge-props@^2.0.0 babel-plugin-syntax-jsx@^6.8.0

书写postcss.config.js和 .babelrc
配置webpack.config.js和package.json使工具生效
【deprecate 已经弃用的WARN可以不管】

5.配置css单独分离打包

npm i extract-text-webpack-plugin@3.0.2

配置webpack.config.js和package.json使工具生效

6.单独打包类库代码及hash优化
配置webpack.config.js和package.json使工具生效

四、加上bootstrap

参考资料
[1]https://blog.csdn.net/wild46cat/article/details/77662555
[2]http://srcct.com/2015/04/19/2015/webpack%20%E5%BC%82%E5%B8%B8%E8%AE%B0%E5%BD%95/

因为bootstrap依赖了jquery，所以要先安装jquery
npm i jquery
然后把这个plugin加入到webpack.config.js中

plugins: [
  new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery"
  })
],

在index.js中引入jquery

import $ from 'jquery'

然后在app.vue的script中加入jquery语句测试是否安装成功

//测试Jquery是否安装成功
$(function () {
    alert(123);
  });

npm run dev弹出提示框就说明安装成功了
然后安装bootstrap

npm install bootstrap@3

在index.js中引入

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min'

要保证引入成功，还需要配置css-loader、file-loader和url-loader，然后在webpack.config.js中配置

            {
                test: /\.jsx$/,
                loader: 'babel-loader'                  //处理jsx文件
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',                     //将css的样式写入到html里面去
                    'css-loader'                        //处理css文件  
                ]
            },
            {
                test: /\.(woff|woff2|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
                loader : 'file-loader'
            },
            {
                test: /\.(gif|jpg|jpeg|png|svg)$/,      //处理图片
                use: [
                    {                                   //loader是可以配置选项的,如下options
                        loader: 'url-loader',           //url-loader实际上依赖于file-loader,file-loader处理完文件可以保存为一个文件供处理
                        options: { 
                            limit: 1024,                //url-loader的好处是可以加一个限制的大小,对于小图片,在范围内可直接将图片转换成base64码直接存放在js中,以减少http请求.
                            name: '[name].[ext]'        //输出文件的名字,[name] 文件原名,[ext]文件扩展名.
                        }
                    }
                ]
            }

然后就可以找个vue组件加上一些bootstrap的样式，例如class="btn btn-default"
然后npm run dev查看效果，看到bootstrap样式的按钮就说明bootstrap安装成功了

五、加上字体图标font-awsome

npm i font-awesome font-awesome-webpack less less-loader 

入口文件

import 'font-awesome-webpack';

在需要的页面或组件使用

<i class="fa fa-home fa-2x"></i>