Webpack - Запустите сервер, посмотрите и скомпилируйте его, затем перезагрузите. Это возможно?
Хорошо, вот в чем дело, я переключаюсь с Gulp на Webpack и пытаюсь заставить Webpack запустить сервер, посмотреть изменения, скомпилировать файлы (CSS, JS и HTML), а затем перезагрузить страницу.
С Gulp это слишком просто, но с Webpack это выглядит как кошмар, вот мой конфигурационный файл Webpack...
const path = require("path");
const glob = require('glob');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const PurifyCSSPlugin = require('purifycss-webpack');
let isProd = (process.env.NODE_ENV === 'production');
module.exports = {
entry: ["./src/js/index.js", "./src/sass/app.scss"],
output: {
filename: "js/index.js",
path: path.join(__dirname, "./build/")
},
devServer: {
contentBase: path.join(__dirname, "./build/")
},
devtool: 'source-map',
module: {
rules: [{
test: /\.html$/,
use: [{
loader: "html-loader",
options: {
minimize: false
}
}]
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
use: [{
loader: "url-loader",
options: {
name: "./images/[name].[ext]",
limit: 10000
}
},
{
loader: "img-loader"
}
]
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
use: [{
loader: "css-loader",
options: {
minimize: false,
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true
}
},
{
loader: "sass-loader",
options: {
sourceMap: true,
outFile: 'css/app.css',
outputStyle: 'expanded'
}
}
]
})
},
{
test: /\.js$/,
use: {
loader: "babel-loader",
options: {
presets: ["env"]
}
}
}
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
}),
new ExtractTextPlugin({
filename: "css/app.css",
disable: false,
allChunks: true
}),
new PurifyCSSPlugin({
paths: glob.sync(path.join(__dirname, 'build/*.html')),
})
]
};
if (isProd) {
module.exports.plugins.push(
new webpack.optimize.UglifyJsPlugin()
)
}
А вот и файл package.json...
{
"name": "project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack --open",
"dev": "webpack",
"prod": "webpack -p",
"watch": "webpack --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"breakpoint-sass": "^2.7.1",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.6",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^2.30.1",
"img-loader": "^2.0.0",
"node-sass": "^4.7.2",
"postcss-loader": "^2.0.10",
"purify-css": "^1.2.5",
"purifycss-webpack": "^0.7.0",
"sass-loader": "^6.0.6",
"susy": "^2.2.12",
"url-loader": "^0.6.2",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
},
"browserslist": [
"last 2 versions"
]
}
Что происходит сейчас, так это то, что когда я печатаю в консоли npm start
сервер запускается просто отлично и перезагружается при сохранении, но изменения не будут применены, потому что файлы в./build не меняются.
Я искал эту проблему, и я не могу найти решение, где я могу запустить сервер, скомпилировать файл, а затем перезагрузить страницу? Это возможно даже в Webpac?
Также в Gulp CSS, используемый для инъекции без перезагрузки страницы, могу ли я добиться того же в Webpack?