仿B站项目——环境配置，文件目录

Posted 2020-10-27 馒头加梨子

环境配置

主要参考入门Webpack，看这篇就够了,webpack入门和webpack实用配置。

实用开发环境

利用下面的webpack.json和webpack.config.js可以搭建一个使用ejs和sass的实用开发环境。

webpack.json

  "devDependencies": {
    "autoprefixer": "^8.1.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "css-loader": "^0.28.10",
    "ejs-compiled-loader": "^1.1.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-inline-source-plugin": "0.0.10",
    "html-webpack-plugin": "^3.0.6",
    "image-webpack-loader": "^4.1.0",
    "postcss-loader": "^2.1.1",
    "style-loader": "^0.20.3",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11",
    "webpack-dev-server": "^3.1.1"
  },

webpack.config.js

//webpack.config.js
const webpack = require(\'webpack\');
const path = require(\'path\');
const HtmlWebpackPlugin = require(\'html-webpack-plugin\');
//const ExtractTextPlugin = require(\'extract-text-webpack-plugin\');

module.exports = {
  devtool: \'none\',

  entry: {
    index: \'./src/page/index.js\'
  },

  output: {
    path: path.resolve(__dirname, \'build\'),
    publicPath: \'/dist/\', //相对路径替换
    filename: \'bundle-[hash].js\'
  },

  devServer: {
    port: 3030, //端口
    contentBase: \'./public\', //本地服务器所加载的页面所在的目录
    historyApiFallback: true, //不跳转
    inline: true, //实时刷新
    hot: true
  },

  watchOptions: {
    poll: 1000, //监测修改的时间(ms)
    aggregateTimeout: 500, //防止重复按键，500毫秒内算按一次
    ignored: /node_modules/, //不监测
  },

  module: {
    rules: [
      {
        test: /\\.jsx|\\.js$/,
        exclude: /node_modules/,
        use: {
          loader: \'babel-loader\',
          options: {
            cacheDirectory: true, //启用缓存
            plugins: [\'transform-runtime\']
          }
        }
      },
      {
        test: /\\.css$/,
        use: [
          \'style-loader\',
          {
            loader: \'css-loader\',
            options: {
              modules: false, //是否启用css-module
              localIdentName: \'[name]__[local]\' //类名转换
            }
          },
          {
            loader: \'postcss-loader\',
            options: {
              plugins: [
                require(\'autoprefixer\')
              ]
            }
          },
          \'sass-loader\'
        ]
      },
      {
        test: /\\.(png|jpg|gif|svg)$/i,
        use:[
          \'url-loader?limit=8192&name=[name]-[hash:5].[ext]\',
          {
            loader: \'image-webpack-loader\',
            options: {
                    mozjpeg: {
                      progressive: true,
                      quality: 65
                    },
                    optipng: {
                      enabled: false,
                    },
                    pngquant: {
                      quality: 80,
                      speed: 4
                    },
                    gifsicle: {
                      interlaced: false,
                    },
                    webp: {
                      quality: 75
                    }
            }
          }
        ]
      }
    ]
  },
  plugins: [
      new webpack.BannerPlugin(\'This file is created by sishenhei7\'),
      //使用模板生成html文件
      new HtmlWebpackPlugin({
        filename:\'index.html\',
        template: \'ejs-compiled-loader!src/page/template.html\',
        title:\'this is index\',
        chunks: [\'index\']
      }),
      new webpack.HotModuleReplacementPlugin() //热加载插件
      //new ExtractTextPlugin(\'styles.css\') //把CSS文件分离出来
    ]
};

目录生成

踩坑：果然目录生成要在前端工程里面完成，因为环境配置要利用目录来设置路径。

我自己思考的目录是这样的：

├── src
│   ├── config
│   │   └── configX.js       #配置文件
│   ├── page
│   │   ├── pageX.js         #页面入口
│   │   └── pageX.ejs        #页面模板
│   ├── static
│   │   ├── .js              #静态js比如jQuery.js
│   │   ├── .css             #静态css比如normalize.css
│   │   └── .jpg             #静态图片
│   └── component            #各个模块
│       └── widgetX
│           ├── .scss
│           ├── .js
│           ├── .html
│           ├── .jpg
│           └── test         #单元测试(暂时没有)
│               └── test.js
├── mobile                   #手机端(暂时没有)
├── dist                     #打包文件夹
│   ├── assets               #各种css, js, image资源
│   │   ├── .css
│   │   ├── .js
│   │   └── .jpg
│   └── pageX.html           #各种页面
├── record
│   └── record.md            #项目记录
├── .babelrc                 #babel配置文件
├── .gitignore               #git配置文件，哪些不上传git
├── package-lock.json
├── package.json
├── README.md
└── webpack.config.js