一、創建項目初始化
1、初始化項目
npm init -y2、創建
src(用來存放開發環境的代碼)文件夾。config(用來存放webpack的配置項)文件夾3、安裝webpack Webpack-cli
二、base.config.js文件
config文件夾下創建base.config.js
1、基本配置
constpath=require("path");
//定義入口文件路徑和出口文件路徑
constPATH={
app:path.join(__dirname,"../src/main.ts"),
build:path.join(__dirname,"../dist")
}
module.exports={
//入口文件路徑
entry:{
app:PATH.app
},
output:{
//導出后文件的名稱
filename:process.env.NODE_ENV!='production'?"js/[name].js":"js/[name].[hash:8].js",
//出口文件的路徑
path:PATH.build
},
resolve:{
//優先引入的后綴文件
extensions:['.ts','.tsx','.js'],
//配置別名
alias:{}
}
}
三、html-webpack-plugin
1、安裝
cnpm install html-webpack-plugin -D
2、使用
const HtmlWebpackPlugin =require("html-webpack-plugin");
module.exports={
plugins:[
newHtmlWebpackPlugin({
template:"../index.html",
filename:"index.html",
title:"vue"
})
]
}
四、loader處理JS文件
1、安裝
cnpm install -D @babel/corebabel-loader @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/polyfill
2、處理JS配置
module:{
rules:[
{
test:/\.js$/,
exclude:path.join(__dirname,"../node_modules"),
loader:"babel-loader"
}
]
},
3、根目錄下創建.babelrc文件
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions"]
}
}
]
],
"plugins": ["@babel/plugin-transform-runtime"]
}
五、loader處理圖片和字體圖標
1、安裝
cnpm install file-loader url-loader -D
2、基本使用
module.exports={
module:{
rules:[
{
test:/\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
publicPath: 'assets',
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}//項目設置打包到dist下的fonts文件夾下
]
},
]
}
}
七、loader處理ts文件
1、安裝
cnpm install ts-loader -D
2、基本使用
module.exports={
module:{
rules:[
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
]
},
}
3、ts配置文件 根目錄創建tsconfig.json
{
"compilerOptions": {
"experimentalDecorators": true, //開啟裝飾器@ （修飾器本質就是編譯時執行的函數）
"strict": false, //啟用所有嚴格類型檢查選項
// 指定生成哪個模塊系統代碼
"module": "es2015",
"moduleResolution": "node",
"target": "es5",//編譯目標平台
"allowJs":true,//允許編譯javascript文件
"noImplicitAny": false, // 在表達式和聲明上有隱含的'any'類型時報錯。
"allowSyntheticDefaultImports": true,
"lib": [
"es5",
"es2015",
"es2016",
"es2017",
"dom"
]
},
"include": ["./**/*.ts"]
}
4、ts識別vue文件 根目錄下創建sfc.d.ts
/**
* 告訴 TypeScript *.vue 后綴的文件可以交給 vue 模塊來處理
* 而在代碼中導入 *.vue 文件的時候，需要寫上 .vue 后綴。
* 原因還是因為 TypeScript 默認只識別 *.ts 文件，不識別 *.vue 文件
*/
declaremodule"*.vue"{
importVuefrom'vue'
exportdefaultVue
}
八、baset.config.js完整代碼
constpath=require("path");
constHtmlWebpackPlugin =require("html-webpack-plugin");
constVueLoaderPlugin=require('vue-loader/lib/plugin')
//定義入口文件路徑和出口文件路徑
constPATH={
app:path.join(__dirname,"../src/main.ts"),
build:path.join(__dirname,"../dist")
}
module.exports={
//入口文件路徑
entry:{
app:PATH.app
},
output:{
//導出后文件的名稱
filename:process.env.NODE_ENV!='production'?"js/[name].js":"js/[name].[hash:8].js",
//出口文件的路徑
path:PATH.build
},
resolve:{
//優先引入的后綴文件
extensions:['.ts','.tsx','.js'],
//配置別名
alias:{}
},
module:{
rules:[
{
test:/\.js$/,
exclude:path.join(__dirname,"../node_modules"),
loader:"babel-loader"
},
{
test:/\.vue$/,
exclude:path.join(__dirname,"../node_modules"),
loader:"vue-loader"
},
{
test:/\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]',
publicPath: 'assets',
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}//項目設置打包到dist下的fonts文件夾下
]
},
{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo: [/\.vue$/]
}
},
]
},
plugins:[
newHtmlWebpackPlugin({
template:"./index.html",
filename:"index.html",
title:"vue"
}),
newVueLoaderPlugin()
]
}