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

环境配置

主要参考入门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