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

前言

由于项目需要构建个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-awesomescss文件

然后在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

© The copyright belongs to the author

 Support

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

×Close

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

golang使用原始套接字构造UDP包

RAW SOCKET 介绍 TCP/IP协议中,最常见的就是原始(SOCKET_RAW)、tcp(SOCKET_STREAM)、udp(SOCKET_DGRA)...

4544
来自专栏王磊的博客

asp.net 操作ftp 通用代码[测试通过]

代码如下: // 建立目录 FtpWebRequest Request = (FtpWebRequest)WebRequest.Crea...

3264
来自专栏开发与安全

linux网络编程之TCP/IP基础(一):TCP/IP协议栈与数据报封装

一、ISO/OSI参考模型 OSI(open system interconnection)开放系统互联模型是由ISO(International Organi...

2175
来自专栏Django Scrapy

端口的常用端口

端口号---具有网络功能的应用软件的标识号。注意,端口号是不固定的,即可以由用户手工可以分配(当然,一般在软件编写时就已经定义)。当然,有很多应用软件有公认的默...

5245
来自专栏PHP在线

TCP/IP、HTTP协议概述

术语TCP/IP代表传输控制协议/网际协议,指的是一系列协议。“IP”代表网际协议,TCP和UDP使用该协议从一个网络传送数据包到另 一个网络。把IP想像成一种...

3085
来自专栏技术小黑屋

关于Android中工作者线程的思考

本文为 InfoQ 中文站特供稿件,首发地址为:http://www.infoq.com/cn/articles/android-worker-thread 如...

482
来自专栏用户画像

第20章 ICMP

72. 源主机ping 目的设备时,如果网络工作正常,则目的设备在接收到该报文后,将会向源主机回应ICMP( )报文。 B

702
来自专栏Jerry的SAP技术分享

C4C销售订单中业务伙伴的自动决定功能Partner determination procedure

例子:我新建一个Sales Order,account 字段选择ID为1001的Account:Porter LLC

1053
来自专栏程序猿

TCP的三次握手与四次挥手过程,各个状态名称与含义,TIMEWAIT的作用。

第一次握手:客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认; 第二次握手:服务器收到syn包,必须确认客户的SYN(a...

3907
来自专栏Java技术分享圈

杨老师课堂之Excel VBA 程序开发第三讲创建日报表

方式1:本节课件下载地址:链接: https://pan.baidu.com/s/1K51AlChFb-N-zsyCtcdm4A 密码: xpwn

542

扫码关注云+社区