webpack+vue+typescript项目配置-CSDN博客

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

配套项目地址（不断完成中）：github.com/GMfight/my-…

第一部分 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:'<h1>我是局部组件1</h1>'        
            }    
    },    
    template:'<ss/>',
})
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()]复制代码

访问 http://localhost:8085/webpack-dev-server/index.html 修改template.html及其它文件，可自动更新代码，刷新浏览器

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

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

访问 http://localhost:8085 修改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

<script lang="ts">    
    import Vue from 'vue'    
    export default Vue.extend({        
        data:function(){            
            return{}        }    
    })
</script>复制代码

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

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

欢迎交流指正