一、创建项目初始化

1、初始化项目npm init -y

2、创建 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()
  ]
}

标签：文件,vue,name,ts,loader,base,webpack4.0,js
来源： https://www.cnblogs.com/yebai/p/11348428.html