使用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 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

ASP.NET开发人员需要学习ASP.NET MVC么?

InfoQ上有篇文章ASP.NET开发人员需要学习ASP.NET MVC么? 文章已经覆盖了绝大多数对于学习/使用ASP.NET MVC的观点。 我觉得ASP....

1889
来自专栏我和未来有约会

44 Amazing Silverlight 2.0 Screencasts

Silverlight - Hello World Silverlight - Anatomy of an Application Silverlight - ...

1979
来自专栏前端说吧

canvas练习 - 圆

572
来自专栏张善友的专栏

跨平台移动开发UI语言 -XAML

Xamarin.Forms 把XAML (Extensible Application Markup Language, XAML) 带进了ios,androi...

1868
来自专栏GIS讲堂

Openlayers4中实现动态线效果

2452
来自专栏十月梦想

canvas简单线条的绘制

1.绘制线条之前首先进行声明线条开始绘制代码context.beginPath;说明:context是画板中获得的绘画环境上述的是cv

442
来自专栏ml

学习HTML5之塔克大战(详细记录)

          学了一些HTML5的一些基本知识,开始学习制作......           介绍一些基本知识:  px(像素)---》1px等于多少? ...

3177
来自专栏一个小程序员的成长笔记

Canvas 给图形绘制阴影

/** * 图形绘制阴影 */ function initDemo6() { var canvas = document.getElementByI...

3497
来自专栏十月梦想

canvas画布实现矩形的绘制

绘制一个实心矩形cv.fillRect(x,y,width,height)绘制之前声明绘制的实心矩形颜色使用fillStyle

1363
来自专栏张善友的专栏

One ASP.NET

大多数情况下,我是一名 ASP.NET开发人员。我不需要指定 MVC 或 Web Form,他们都是微软One ASP.NET战略的核心。我的应用程序往往是混合...

20110

扫码关注云+社区