Антон Кастрицкий
Вебпак, вид сквозь монокль.pdf
npm init //
npm install --save-dev webpack
npm install --save-dev webpack-cli
npm install webpack-dev-server --save-dev
npm install -D babel-loader @babel/core @babel/preset-env // установка babel
npm install cache-loader style-loader css-loader sass-loader node-sass --save-dev
npm i -D html-webpack-plugin
webpack.config.js : webpack-advanced
module.exports = {
entry: './src/index.js',
output: {
filename: 'build.js',
path: __dirname + '/assets'
}
module: {
rules: [
{
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS, using Node Sass by default
]
},{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
]
}
plugins: [
new HtmlWebpackPlugin({
title: 'My App'
})
]
};
package.json
{
...
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack --watch"
},
...
}
npm run build // сборка на продакшн
npm run dev // для разработки