撸起袖子直接干就完事了
第一版：
项目结构
首先安装node环境，不概述了。
然后安装一下webpack的依赖：npm i webpack webpack webpack-cli -D
然后配置webpack.config.js。由于开发环境和生产环境的配置有公用的部分。所以把公共部分提取出来。
webpack.base.conf.js:
首先：npm i html-webpack-plugin -D（这个plugin的作用是以当前目前的index.html为模板，生成新的html，引入js和css）
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
path: path.resolve(__dirname, '../src/main.js')
},
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].[hash].js',
publicPath: '/'
},
module: {
rules: []
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, 'index.html')
})
],
}
webpack.dev.conf.js: 开发环境
npm i webpack-dev-server webpack-merge -D（合并webpack配置）
const merge = require('webpack-merge');
const path = require('path');
const baseConfig = require('./webpack.base.conf.js')
module.exports = merge(baseConfig, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: path.resolve(__dirname, '../dist')
}
})
webpack.prod.conf.js
npm i clean-webpack-plugin -D（此pulgin的作用是清楚文件，打包后dist文件夹的文件，在此打包后先删除）
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');
const baseConfig = require('./webpack.base.conf');
module.exports = merge(baseConfig, {
mode: 'production',
devtool: 'source-map',
module: {
rules: []
},
plugins: [
new CleanWebpackPlugin(['dist/'], {
root: path.resolve(__dirname, '../')
})
]
})
引入vue：npm i vue
html文件：
<body>
<div id="app">{{message}}</div>
<script src="/dist/main.js"></script>
</body>
main.js文件：
import Vue from 'vue'
var app = new Vue({
el: '#app',
data: {
message: 'hello webpack!!!'
}
})
然后在webpack.base.conf.js里面添加配置别名等
resolve: {
alias: {
// 配置别名'vue$'
'vue$': 'vue/dist/vue.esm.js',
// 这个为src配置别名
'@': path.resolve(__dirname, '../src')
},
// 省略拓展名
extensions: ['*', '.js', '.json', '.vue'],
}
package.json
"scripts": {
"dev": "webpack-dev-server --inline --hot --config build/webpack.dev.conf.js",
"build": "node build/build.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
最后npm run dev ，项目跑起来了
image.png
第二版：
src新增App.vue文件
npm install -D vue-loader vue-template-compiler
新增配置
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
新增plugin:
const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins: [
new VueLoaderPlugin()
],
处理样式
npm i less-loader css-loader style-loader less autoprefixer postcss-loader -D
配置：
{
test: /\.css$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'postcss-loader'}
]
},
配置postcss
新建：postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')({
"overrideBrowserslist": [
"defaults",
"not ie < 9",
"last 2 versions",
"> 1%",
"iOS 7",
"last 3 iOS versions"
]
})
]
}
配置less
修改配置
{
test: /\.l?(c|e)ss$/,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{ loader: 'less-loader' },
{loader: 'postcss-loader'}
]
}
处理图片
npm i url-loader file-loader -D
配置：
{
test: /\.(png|jpg|jfif|jpeg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 低于这个limit就直接转成base64插入到style里，不然以name的方式命名存放
limit: 8192,
name: 'static/images/[hash:8].[name].[ext]',
outputPath: "images/",
esModule: false // 关闭，否则图片路径解析不正确
}
}
]
},
最后npm run dev，大功告成
第三版
配置ts
npm i vue-class-component vue-property-decorator --save
yarn add ts-loader typescript
修改入口：
path: path.resolve(__dirname, '../src/main.ts')
修改extensions：
resolve: {
extensions: ['.js', '.vue', '.json', '.ts']
}
添加webpack对ts的解析
{
test: /\.ts$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
}
添加 tsconfig.json
{
// 编译选项
"compilerOptions": {
// 输出目录
"outDir": "./output",
// 是否包含可以用于 debug 的 sourceMap
"sourceMap": true,
// 以严格模式解析
"strict": true,
// 采用的模块系统
"module": "esnext",
// 如何处理模块
"moduleResolution": "node",
// 编译输出目标 ES 版本
"target": "es5",
// 允许从没有设置默认导出的模块中默认导入
"allowSyntheticDefaultImports": true,
// 将每个文件作为单独的模块
"isolatedModules": false,
// 启用装饰器
"experimentalDecorators": true,
// 启用设计类型元数据（用于反射）
"emitDecoratorMetadata": true,
// 在表达式和声明上有隐含的any类型时报错
"noImplicitAny": false,
// 不是函数的所有返回路径都有返回值时报错。
"noImplicitReturns": true,
// 从 tslib 导入外部帮助库: 比如__extends，__rest等
"importHelpers": true,
// 编译过程中打印文件名
"listFiles": true,
// 移除注释
"removeComments": true,
"suppressImplicitAnyIndexErrors": true,
// 允许编译javascript文件
"allowJs": true,
// 解析非相对模块名的基准目录
"baseUrl": "./",
// 指定特殊模块的路径
"paths": {
"jquery": [
"node_modules/jquery/dist/jquery"
]
},
// 编译过程中需要引入的库文件的列表
"lib": [
"dom",
"es2015",
"es2015.promise"
]
}
}
配置.ts识别vue
由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 shims-vue.d.ts
declare module '*.vue' {
import Vue from 'vue';
export default Vue;
}
接下来就可以用ts语法来写啦
<template>
<div class="container">
<p>{{message}}</p>
<div class="pics">
<div class="img">
<img src="../static/images/1.gif"
alt="">
</div>
<div class="imgs">
</div>
</div>
<Hello></Hello>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Hello from "@/components/hello";
@Component({
components: {
Hello
}
})
export default class App extends Vue {
message = "hello Vue!!!";
mounted() {
this.update();
}
update() {
setTimeout(() => {
console.log("test");
}, 1e3);
}
}
</script>
<style lang="less">
.container {
background: pink;
.imgs {
width: 100px;
height: 100px;
background: url("../static/images/1.gif");
}
}
</style>
大功告成~
参考：
https://segmentfault.com/a/1190000016972438#item-2-1
https://segmentfault.com/a/1190000011744210?utm_source=tag-newest
网友评论