|
1 |
cnpm install --save-dev webpack sass-loader node-sass css-loader extract-text-webpack-plugin |
package.json
|
1 2 3 |
"scripts": { "dev": "webpack --progress --watch --config webpack.config.js" } |
webpack.config.js
|
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'), ] }; |
src/index.js
|
1 2 3 4 5 |
import './main.scss'; import './home.scss'; import 'font-awesome/css/font-awesome.min.css' export {}; |
安装个字体库
|
1 |
cnpm install --save-dev file-loader url-loader |
配置webpack.config.js
|
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]' } } |