node启动html

1、

"scripts": {

    "dev": "./node_modules/.bin/live-server --port=1231"

  },

npm init -y    

npm install  live-server -s 

npm install webpack  -s   

npm  install  webpack-cli

webpack 配置 

 

var path = require('path');

var path = require('path');

module.exports = {

  mode: 'development',

  entry: './main.js',  //把所有要打包的文件引入进去 

  output: {

    path: path.resolve(__dirname, './dist'),

    filename: 'index.js'

  },

  module: {   //下面是css 的打包

    rules: [

      {

        test: /\.css$/,  //匹配正则表达的文件

        use: [

          { loader: 'style-loader' },

          {

            loader: 'css-loader',

            options: {

              modules: true

            }

          }

        ]

      }

    ]

  }

};

2、Css打包    安装好了 依赖后在  

npm install  style-loader  css-loader -s  

webpack.config.js  中  添加下面

module: {

    rules: [

      {

        test: /\.css$/,  //匹配正则表达的文件

        use: [

          { loader: 'style-loader' },

          {

            loader: 'css-loader',

            options: {

              modules: true

            }

          }

        ]

      }

    ]

  }

4 、 各种配置

解决css文件 cnpm i style-loader css-loader -D
{ test: /.css$/, use: [‘style-loader’,‘css-loader’] }

解决less文件 cnpm i less-loader less -D
{ test: /.less$/, use: [‘style-loader’,‘css-loader’,‘less-loader’] }

解决scss文件 cnpm i sass-loader node-sass -D
{ test: /.sass$/, use: [‘style-loader’,‘css-loader’,‘sass-loader’] }

解决图片文件 cnpm i url-loader file-loader -D
{test: /.(jpg|png|gif|bmp|jpeg)KaTeX parse error: Expected 'EOF', got '&' at position 34: …r?limit=3000000&̲name=[hash:8]-[…)/, use: ‘url-loader’}, //处理 字体文件的 loader

{ test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/ }, //配置 Babel 来转换高级的 ES 语法

使用babel ， 可以帮我们将高级的语法转换为低级的语法
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
{ /.js$/ , use: ‘babel-loader’, exclude: /node_modules/ }

{ test: /.vue$/, use: ‘vue-loader’ }, // 处理 .vue 文件的loade
原文链接：https://blog.csdn.net/weixin_44387746/article/details/98210903