webpack+vue+typescript项目配置-白红宇

学习vue的过程中，使用了官方提供的模板，参照了github的demo一步步做的。完成了几个小模块后，发现对vue应用不断熟悉，但是配置这里还是很难理解，于是学习webpack官网，决定自己从webpack配置做起，逐步搭建个人项目

配套项目地址（不断完成中）：

第一部分 webpack搭建web项目

1 创建目录my-pj5 打开命令行执行npm init，生成package.json文件

2 安装webpack-cli，创建webpack.config.js文件

2.1）添加entry，output配置

entry:{    main:['./src/index.js']},output:{    filename:'[name].bundle.js',    path:'/'},复制代码

index.js代码

console.log('this is my index page test')复制代码

2.2）在package.json中添加npm执行脚本

"scripts": {    "dev":"webpack --config webpack.dev.config.js",}复制代码

执行脚本npm run dev后，会在目录下生成编译文件main.js

2.3）在webpack.dev.config.js文件plugins下添加：

new HtmlWebpackPlugin({        title:'note book'})复制代码

执行脚本npm run dev后，dist目录下可以生成index.html和min.js，且main.js会自动注入index.html。打开index.html文件可访问页面

2.4）安装webpack-dev-server包：

在webpack.dev.config.js文件下添加：

devServer:{        clientLogLevel:'info',            //日志输出        host:'localhost',                //访问ip        port:8085,                      //端口        open:true,                      //是否自动打开浏览器}复制代码

在package.json下修改脚本

"scripts": {        "dev":"webpack-dev-server --config webpack.dev.config.js"}复制代码

执行脚本后，浏览器自动打开，访问http://localhost:8085，访问到页面

2.5）在webpack.config.dev.js，plugins下添加

new webpack.HotModuleReplacementPlugin()复制代码

文件修改时，会自动编译，自动刷新浏览器

想要同时使用loclahost和ip访问时，在devServer中修改配置

host:'0.0.0.0',复制代码

第二部分添加vue相关配置

3.1下载vue安装包，在webpack.dev.config.js文件中配置

new HtmlWebpackPlugin({        title:'note book',        template:'template.html'}),复制代码

会以template配置的html文件为模板自动生成index.html文件，并将编译好的js，css注入。

template配置的文件需要为vue提供挂载元素

3.2 配置入口文件，index.js

var vm=new Vue({        el:'#app',        components:{            'ss':{                    template:'我是局部组件1
'                    }        },        template:'
      ',})export default vm复制代码

el：指定index.html中的挂载元素

template：指定渲染到挂载元素的内容（参照，有template配置，需要渲染的，应当引用含有编译器vue包；使用render函数的可以只引用运行时vue包）

components：指定组件

3.2.1 项目引用的vue包在webpack.dev.config.js中配置

resolve:{        extensions:['.js','.json'],,        alias:{                'vue$':'vue/dist/vue.common.js'        }}复制代码

3.3 使用iframe实时更新和刷新配置

在webpack.dev.config.js中

devServer:{        inline:false,        hot:false,},plugins:[    new webpack.HotModuleReplacementPlugin()]复制代码

访问修改template.html及其它文件，可自动更新代码，刷新浏览器

3.4 使用inline实时更新和刷新配置

devServer:{        inline:true,        hot:true,},plugins:[    new webpack.HotModuleReplacementPlugin()]复制代码

访问修改template.html，自动编译，不刷新浏览器；修改其它文件，可自动更新代码，刷新浏览器

4.为支持单文件组件.vue，需要做配置

下载vue-loader，在webpack.dev.config.js中

const VueLoaderPlugin=require('vue-loader/lib/plugin')module:{        rules:[ {                test:/\.tsx?$/,         loader:'vue-loader',        exclude:/node_modules/         }, {        test:/\.(ts|tsx)?$/,    loader:'ts-loader',        options:{        appendTsSuffixTo:[/\.vue$/],   //为script有lang='ts'标识的脚本文件添加ts后缀    }},          ]},plugins:[    new VueLoaderPlugin()]复制代码

5.为支持scss，需要安装并配置样式loader

需要安装包

"css-loader": "^1.0.1","node-sass": "^4.10.0",    //sass-loader依赖于node-sass"sass-loader": "^7.1.0",    "style-loader": "^0.23.1",    //将编译得到的css文件插入style标签内复制代码

webpack.dev.config.js中

{        test:/\.(css|scss)$/,        loaders:['style-loader','css-loader','sass-loader'],    //需要注意顺序        exclude:/node_modules/}复制代码

第三部分引入typescript

6.typescript配置

安装typescript,ts-loader

//package.json"ts-loader": "^5.3.0",        //将ts转化为javascript"typescript": "^3.1.6",复制代码

在webpack.dev.config.js中添加配置

resolve:{        extensions:['.js','.json','.tsx','.ts','.vue'],        alias:{                'vue$':'vue/dist/vue.esm.js'        }},module:{    rules:[{                    test:/\.(ts|tsx)?$/,                loader:'ts-loader',                    options:{                        appendTsSuffixTo:[/\.vue$/],   //为script有lang='ts'标识的脚本文件添加ts后缀                }        }]}复制代码

创建单文件组件时，如app.vue

复制代码

创建单文件组件有两种方式 vue.extends或者decorator

项目写到哪里，文档更到哪里，还有一些比较零碎的页面交互，设计之类的，没有整理，之后发

欢迎交流指正