Answer the question
In order to leave comments, you need to log in
Building statics in WEBPACK. Correct config?
Question.
It is required to collect Statics JS\SCSS\CSS to minimize clean and fold into a folder in JS, it looks like ES6 i.e. Babel
Can't set up WEBPACK correctly.
In addition to the specified module, for some reason it additionally collects a 2mb file with, in my opinion, the entire node_modules folder (it is logical that it was added to the exceptions)
+ it is not clear how to organize the SCSS assembly so that it would be easy to convert it to CSS and put it where it should be.
{
context: __dirname + '/src',
node: {
fs: "empty"
},
entry: {
app: './jsx/app.jsx'
},
output: {
filename: '/js/[name].js',
path: './dist'
},
modulesDirectories: ['node_modules'],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{
test: /\.(js|jsx)?$/,
exclude: ['node_modules'],
loader: "babel-loader",
query: {
presets: ['es2015']
}
},
{
test: /\.json?$/,
exclude: ['node_modules'],
loader: "json-loader"
}
]
},
plugins: [
new CleanWebpackPlugin([ 'dist/js' ], {
root: __dirname,
verbose: true,
dry: false
})
]
}
Asset Size Chunks Chunk Names
/js/app.js 226 kB 0 [emitted] app
/js/main.js 1.65 MB 1 [emitted] main
Answer the question
In order to leave comments, you need to log in
A piece of the working config
{
resolve: {
modulesDirectories: [
'node_modules',
'src'
],
root: [],
extensions: ['', '.js', '.pug'],
alias: {
underscore: path.join(__dirname, 'node_modules/lodash/index')
}
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'stage-0']
}
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint'
},
{
test: /\.json$/,
exclude: /node_modules/,
loader: 'json'
},
{
test: /\.pug$/,
loader: 'pug?root=templates'
},
{
test: /\.html$/,
loader: 'underscore-template-loader',
query: {
engine: 'lodash'
}
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract(cssConfig())
},
{
test: /\.(svg|png|jpg)$/,
exclude: /fonts/,
loader: `file?name=${config.get('pattern.file')}`
},
{
test: /fonts/,
exclude: /node_modules/,
loader: `file?name=${config.get('pattern.font')}`
}
]
},
}
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question