webpack2编译scss – 知识点滴

cnpm install --save-dev webpack sass-loader node-sass css-loader extract-text-webpack-plugin

1	cnpm install --save-dev webpack sass-loader node-sass css-loader extract-text-webpack-plugin

  "scripts": {
    "dev": "webpack --progress --watch --config webpack.config.js"
  }

1

2

3

"scripts": {

"dev": "webpack --progress --watch --config webpack.config.js"

}

var path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                use: 'css-loader'
            })
        }, {
            test: /\.(sass|scss)$/,
            use: ExtractTextPlugin.extract({
                use: [
                    'css-loader',
                    'sass-loader',
                ]
            }),
        } ]
    },
    plugins: [
        new ExtractTextPlugin('styles.css'),
    ]
};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

var path = require('path');

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {

entry: './src/index.js',

output: {

filename: 'bundle.js',

path: path.resolve(__dirname, 'dist')

},

module: {

rules: [{

test: /\.css$/,

use: ExtractTextPlugin.extract({

use: 'css-loader'

})

}, {

test: /\.(sass|scss)$/,

use: ExtractTextPlugin.extract({

use: [

'css-loader',

'sass-loader',

]

}),

} ]

},

plugins: [

new ExtractTextPlugin('styles.css'),

]

};

import './main.scss';
import './home.scss';
import 'font-awesome/css/font-awesome.min.css'

export {};

1

2

3

4

5

import './main.scss';

import './home.scss';

import 'font-awesome/css/font-awesome.min.css'

export {};

cnpm install --save-dev file-loader url-loader

1	cnpm install --save-dev file-loader url-loader

            {
                test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'fonts/[name].[hash:7].[ext]'
                }
            }

1

2

3

4

5

6

7

8

{

test: /\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/,

loader: 'url-loader',

options: {

limit: 10000,

name: 'fonts/[name].[hash:7].[ext]'

}