Я раньше использовал cdn но в вебапке как я знаю лучше использовать через npm такие библеотеки. Не доконца понимаю webpack и тут у меня были всегда проблемы с подключением в проектах node js.
Вот мой код. webpack.config.js
const path = require('path');
module.exports = {
entry: './src/header.js',
output: {
path: path.resolve(__dirname, 'public'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.jsx$/,
use: ['babel-loader'],
exclude: /\/node_module\//
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.(png|svg|jpg|gif)$/,
use: ['file-loader']
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ['file-loader']
}
]
},
devtool: 'source-map',
context: __dirname,
watch: true,
watchOptions: {
aggregateTimeout: 300
}
};
В layout я подключаю его
doctype html
html
head
title=title
meta(name="viewport", content="width=device-width, initial-scale=1.0")
link(href='bundle.js')
...
И в самом файле src/header.js
import 'materialize-css'
И в консоле
C:\OpenServer\domains\crm_nodejs1>webpack
Webpack is watching the files…
Hash: edaa98da906a12b4fd15
Version: webpack 3.8.1
Time: 1135ms
Asset Size Chunks Chunk Names
bundle.js 724 kB 0 [emitted] [big] main
bundle.js.map 904 kB 0 [emitted] main
[1] ./src/header.js 24 bytes {0} [built]
[3] (webpack)/buildin/module.js 495 bytes {0} [built]
[4] (webpack)/buildin/amd-options.js 80 bytes {0} [built]
+ 3 hidden modules
Но стили не подключились