webpack+ts+css+scss+html项目开发框架搭建(webpack5.69.1)

1. 项目初始化准备新建文件夹,并初始化项目

   npm init 或者 yarn init
   

   得到这样的目录结构里面有一个模块配置文件package.json
   

2. 在更目录下新建一个webpack配置文件webpack.config.js得到下面的目录机构
   

3. 在webpack.config.js中配置打包所需要的配置项(这里把我自己的配置贴上附有说明)

   
   const HtmlWebpackPlugin = require('html-webpack-plugin')
   // 压缩css
   const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
   // 打包css
   const MiniCssExtractPlugin = require('mini-css-extract-plugin');
   // 清除文件
   const { CleanWebpackPlugin } = require('clean-webpack-plugin')
   module.exports = {
     // 入口
     entry: {
       'js/main': __dirname + '/src/main.ts',
       'js/index': __dirname + '/src/ts/index.ts',
       'js/page1': __dirname + '/src/ts/page1.ts'
     },
     // 出口
     output: {
       // 出口位置
       path: __dirname + '/dist',
       // 打包以后文件名称
       filename: '[name].[chunkhash].js'
     },
     mode: 'development',
     // 打包需要使用的模块
     module: {
       // 指定加载规则
       rules: [
         {
           // 指定规则生效的文件
           test: /\.ts$/,
           // 使用什么去处理文件
           use: 'ts-loader',
           exclude: /node_modules/
         },
         {
           test:/\.css$/,
           use:[MiniCssExtractPlugin.loader, 'css-loader','postcss-loader']
         },
         {
           test: /\.scss$/,
           use: [
               MiniCssExtractPlugin.loader,
               'css-loader',
               'sass-loader'
           ]
         }
       ]
     },
     optimization: {
       minimize: true,
       minimizer: [new CssMinimizerPlugin()],
     },
     // 引入插件
     plugins: [
       new HtmlWebpackPlugin({
         filename: 'html/index.html',
         template: __dirname + '/src/views/index.html',
         chunks:['js/index', 'js/main']
       }),
       new HtmlWebpackPlugin({
         filename: 'html/page1.html',
         template: __dirname + '/src/views/page1.html',
         chunks:['js/page1', 'js/main']
       }),
       //可以打包在一个文件夹内
       new MiniCssExtractPlugin({
         filename:"css/[chunkhash].css"
       }),
       // 清除上一次的打包文件
       // new CleanWebpackPlugin()
     ],
     devServer: {
       static: __dirname + "dist",
       hot: true
     }
   }
   

4. 如代码上所示我们需要引入一些第三方模块,第三方模块如下:

    css-minimizer-webpack-plugin(压缩css),
    mini-css-extract-plugin(打包css),
    clean-webpack-plugin(清理上一次打包剩下的dist文件), 
    ts-loader(打包处理ts文件),
    css-loader,postcss-loader(打包处理css文件),
    sass-loader, node-sass(打包处理scss文件 sass-loader@11.1.1 node-sass@6.0.0)
    webpack, webpack-cli(webpack环境)
    webpack-dev-server(实时热更新)
    typescript,
    html-webpack-plugin(处理html文件)
   // 为了方便一起安装了用npm install和yarn add都行
   yarn add -D css-minimizer-webpack-plugin mini-css-extract-plugin clean-webpack-plugin ts-loader css-loader postcss-loader sass-loader@11.1.1 node-sass@6.0.0 webpack webpack-cli webpack-dev-server typescript html-webpack-plugin
   

5. 初始化ts配置文件tscongif.json(注意请全局安装ts环境)

   tsc --init
   

6. 在更目录新建src目录里面的结构如下
   

7. 在package.json里修改一些配置信息

   "scripts": {
       "serve": "webpack serve --open html/index.html",
       "dev": "webpack --mode development",
       "build": "webpack --mode production"
     },
   

8. 然后就可以打包了

   // 打包
   yarn build 
   // 热更新
   yarn serve
   

   打包以后的得到的dist
   
   小白一个技术不好请指教
   附上源码地址:https://gitee.com/xuhaoguanxinyu/webpack-ts-html.git