In command prompt, if I type webpack and press enter, the output entry.min.js can be generated correctly. However, if I type npm build and press enter, nothing generated.
Is there anything wrong with my package.json or webpack.config.js?
BTW, is there a way to generate a bundled & minified CSS instead of a JS file? Because the input is a CSS file but it gives me a JS file.
Package.json
{
"name": "assets",
"version": "0.1.0",
"description": "Front End Assets",
"scripts": {
"build": "webpack"
},
"author": "",
"license": "Mozilla Public License Version 2.0",
"dependencies": {
"webpack": "^1.13.1",
"typescript": "^1.8.10"
},
"devDependencies": {
"css-loader": "^0.23.1",
"style-loader": "^0.13.1",
"webpack-dev-server": "^1.14.1"
}
}
WebPack.config.js
module.exports = {
entry: {
entry:"./src/entry.js"
},
output: {
path: __dirname + "/bundle",
filename: "[name].min.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
Entry.js
require ("./common/reset.css");
Reset.css
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove default margin (opinionated).
*/
body {
margin: 0;
}
If you want to run
"scripts": {
"build": "webpack"
}
You should type in command line:
npm run build
Your configuration in webpack.config.js
will create single .js
file with styles inside - this is normal behaviour.
If you want to extract css from js you should take a look at this plugin extract-text-webpack-plugin.