使用Webpack快速配置编写HTML基础环境

用户1203875

发布于 2018-06-19 17:55:44

8340

发布于 2018-06-19 17:55:44

文章被收录于专栏：Rovo89Rovo89

前言

由于项目需要构建个webpack打包坏境：

目前用到技术栈：Pug + SASS + Webpack + browser

JavaScript使用ES6编写编译ES5即可。

package.json直接写入：

{
  "name": "My_Project",
  "version": "0.0.1",
  "scripts": {
    "serve": "webpack-dev-server",
    "build": "webpack --config webpack.config.prod.babel.js"
  },
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^8.3.0",
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "browser-sync": "^2.23.6",
    "browser-sync-webpack-plugin": "^2.2.2",
    "css-loader": "^0.28.11",
    "csso-loader": "^0.3.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-loader": "^0.5.5",
    "node-sass": "^4.8.3",
    "postcss-loader": "^2.1.4",
    "pug": "^2.0.3",
    "pug-html-loader": "^1.1.5",
    "pug-loader": "^2.4.0",
    "sanitize.css": "^5.0.0",
    "sass-loader": "^7.0.1",
    "webpack": "4.6.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "3.1.3"
  }
}

新建webpack.config.babel.js

import webpack from 'webpack'
import path from 'path'
import autoprefixer from 'autoprefixer'
import ExtractTextPlugin from 'extract-text-webpack-plugin'
import BrowserSyncPlugin from 'browser-sync-webpack-plugin'

let extractStyles = new ExtractTextPlugin('[name].css')
let extractHtml = new ExtractTextPlugin('[name].html')

let config = {
  mode: 'development',
  entry: {
    index: [
      path.resolve(__dirname, 'templates/index.pug')
    ],
    post: [
      path.resolve(__dirname, 'templates/post.pug')
    ],    
    'css/application': [
      path.resolve(__dirname, 'assets/styles/application.scss')
    ]
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: extractHtml.extract({
          use: ['html-loader', 'pug-html-loader?pretty&exports=false']
        })
      },
      {
        test: /\.scss$/,
        use: extractStyles.extract({
          use: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  autoprefixer({
                    browsers: [
                      'last 2 version',
                      'Explorer >= 10',
                      'Android >= 4'
                    ]
                  })
                ]
              }
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: [
                  path.resolve(__dirname, 'node_modules/sanitize.css/')
                ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    extractStyles,
    extractHtml,
    new BrowserSyncPlugin(
      {
        host: 'localhost',
        port: 3000,
        proxy: 'http://localhost:8081/'
      },
      {
        reload: true
      }
    )
  ]
}

export default config

新建webpack.config.prod.babel.js

import webpack from 'webpack'
import path from 'path'
import autoprefixer from 'autoprefixer'
import ExtractTextPlugin from 'extract-text-webpack-plugin'

let extractStyles = new ExtractTextPlugin('[name].css')
let extractHtml = new ExtractTextPlugin('[name].html')

let config = {
  mode: 'production',
  entry: {
    index: [
      path.resolve(__dirname, 'templates/index.pug')
    ],
    post: [
      path.resolve(__dirname, 'templates/post.pug')
    ],    
    'css/application': [
      path.resolve(__dirname, 'assets/styles/application.scss')
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.pug$/,
        use: extractHtml.extract({
          use: ['html-loader', 'pug-html-loader?pretty&exports=false']
        })
      },
      {
        test: /\.scss$/,
        use: extractStyles.extract({
          use: [
            {
              loader: 'css-loader'
            },
            {
              loader: 'csso-loader?-restructure'
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: [
                  autoprefixer({
                    browsers: [
                      'last 2 version',
                      'Explorer >= 10',
                      'Android >= 4'
                    ]
                  })
                ]
              }
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: [
                  path.resolve(__dirname, 'node_modules/sanitize.css/')
                ]
              }
            }
          ]
        })
      }
    ]
  },
  plugins: [
    extractStyles,
    extractHtml
  ]
}

export default config

集成Font Awesome

在这儿遇到坑，记录下来：

首先安装npm包：

npm install file-loader --save-dev

引入font-awesome的scss文件

然后在webpack.config.js添加：

module.exports = {
    ...
    module: {
      rules: [

       // other loaders
       ...
       {
         test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
         use: [{
           loader: 'file-loader',
           options: {
             name: '[name].[ext]',
             outputPath: 'fonts/',    // where the fonts will go
             publicPath: '../'       // override the default path
           }
         }]
       },
     ] // -rules
    } // -module
} // -module.exports

这样就可以用了。

Last modification：May 13th, 2018 at 09:50 pm

Support

If you think my article is useful to you, please feel free to appreciate

×Close

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

html