通过webpack构建一个项目
一、整体思路
二、效果展示
(一)、package.json配置文件
(二)、package.json文件
{
"name": "03TS-Project1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules\\.bin\\webpack --mode production",
"serve": "node_modules\\.bin\\webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"ts-loader": "^6.2.2",
"file-loader": "^3.0.1",
"url-loader": "^1.1.2",
"css-loader": "^2.1.1",
"style-loader": "^0.23.1",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11"
},
"dependencies": {
"@babel/core": "^7.4.5",
"@babel/preset-env": "^7.4.5",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.0.4",
"typescript": "^3.8.3",
"vue-class-component": "^7.2.3",
"vue-loader": "^15.9.1",
"vue-property-decorator": "^8.4.1",
"webpack-dev-server": "^3.10.3"
}
}
三、其它
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "node_modules\\.bin\\webpack --mode production",
"serve": "node_modules\\.bin\\webpack-dev-server"
},
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strict": true,
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"skipLibCheck": true,
"esModuleInterop": true,
"experimentalDecorators": true
},
"include": [
"./src/**/*"
]
}
- 配置webpackage
const path = require('path'); //nodejs内置模块
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
entry: './src/main.ts',
output: {
path: path.resolve(__dirname, 'dist'), // d://webpakc/dist
filename: 'bundle.js' // d://webpakc/dist/bundle.js
},
//本地服务
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000,
historyApiFallback: true, //不跳转
inline: true //实时刷新
},
resolve: {
// Add `.ts` and `.tsx` as a resolvable extension.
extensions: [".ts", ".tsx", ".js",".json",".vue"],
// 设置别名
alias: {
'@': resolve('src') // 这样配置后 @ 可以指向 src 目录
}
},
module: {
rules: [{
test: /\.js$/,
exclude: path.resolve(__dirname, 'node_modules'),
include: path.resolve(__dirname, 'src'),
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|jpg|gif)$/,
use: [{
loader: 'url-loader',
options: {
limit: 12192
}
}]
},
{
test: /\.tsx?$/,
loader: "ts-loader",
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/],
}
},
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
//插件
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: __dirname + "/public/index.html"
}),
// 请确保引入这个插件!
new VueLoaderPlugin()
]
};
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}