J'utilise css-loader et j'obtiens l'erreur suivante:
ERREUR dans ./src/pages/home/index.js
Module introuvable: Erreur: impossible de résoudre 'css-loader' dans '/ Users/jian/Documents/sina/webpack-barbarian-test'
@ ./src/pages/home/index.js 2: 0-20
@ multi ../webpack-barbarian/node_modules/webpack-dev-server/client? http://localhost ../webpack-barbarian/node_modules/webpack/hot/dev -server.js ./src/pages/home/index.js
./src/pages/home/index.js:
import $ from 'jQuery'
import './style.css'
$("#container").html('This is a test file, 1')
webpack.config.js:
{
mode: 'development',
entry: {
home: './src/pages/home/index.js'
},
output: {
path: '/Users/jian/Documents/sina/webpack-barbarian-test/dist',
filename: '[name].js',
publicPath: '/'
},
resolve: {
extensions: ['.js', 'jsx', '.vue', '.json'],
alias: {}
},
module: {
rules: [{
test: /\.js$/,
loader: 'babel-loader',
include: ['/Users/jian/Documents/sina/src', '/Users/jian/Documents/sina/test'],
options: {
presets: [['env', {
modules: false,
targets: {
browsers: ['> 1%', 'last 2 versions', 'not ie <= 8']
}
}], 'stage-2'],
plugins: ['transform-runtime']
}
},
{
test: /\.pug$/,
loader: 'pug-loader',
options: {
pretty: true
},
exclude: ['node_modules']
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/img/[name].[hash:7].[ext]'
}
},
{
test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/media/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'static/fonts/[name].[hash:7].[ext]'
}
},
{
test: /\.css$/,
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
}]
},
{
test: /\.less$/,
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'less-loader',
options: {
sourceMap: true
}
}]
},
{
test: /\.sass$/,
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
indentedSyntax: true,
sourceMap: true
}
}]
},
{
test: /\.scss$/,
use: [{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
sourceMap: true
}
}]
}]
},
devtool: 'cheap-module-eval-source-map',
plugins: [HotModuleReplacementPlugin {
options: {},
multiStep: undefined,
fullBuildTimeout: 200,
requestTimeout: 10000
},
HtmlWebpackPlugin {
options: {
template: 'src/pages/home/index.html',
templateParameters: [Function: templateParametersGenerator],
filename: 'home.html',
hash: true,
inject: true,
compile: true,
favicon: false,
minify: false,
cache: true,
showErrors: true,
chunks: ['manifest', 'vendor', 'home'],
excludeChunks: [],
chunksSortMode: 'auto',
meta: {},
title: 'Webpack App',
xhtml: false,
injuct: true
}
}]
}
Compris comment cette erreur s'est produite
Je développe un module npm et j'utilise npm link
pour le tester sur mon ordinateur local.
Il paraît que css-loader
et post-loader
doit également être installé dans le répertoire de test.
alors npm install css-loader -D
travaillé.
thx @Aritra Chakraborty.