In my earlier post I have discussed about the installation
of webpack and webpack-dev-server for a project. In this post I will discuss
how to start/run webpack dev server configuring with webpack. To do so, first
of all we need to add a command in scripts of package.json file as follows:
"start": "webpack-dev-server"
Make sure “webpack-dev-server” is the package name installed
under devDependencies. And the full scripts will be looked like below:
"scripts": {
"test":
"echo \"Error: no test specified\" && exit 1",
"start":
"webpack-dev-server"
},
When we run npm start command the “webpack-dev-server” will
be executed but it will seek a webpack config file which need to be created in
the project root folder and the name should be webpack.config.js. We will add
some configuration settings in this file as follows:
const path = require('path');
const autoprefixer = require('autoprefixer');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool:
'cheap-module-eval-source-map',
entry:
'./src/index.js',
output: {
path:
path.resolve(__dirname, 'dist'),
filename:
'bundle.js',
chunkFilename:
'[id].js',
publicPath: ''
},
resolve: {
extensions:
['.js', '.jsx']
},
module: {
rules: [
{
test:
/\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test:
/\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader' },
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
autoprefixer({
browsers:
[
"> 1%",
"Last 2 versions"
]
})
]
}
}
]
},
{
test:
/\.(png|jpe?g|gif)$/,
loader: 'url-loader?limit=8000&name=images/[name].[ext]'
}
]
},
plugins: [
new
htmlWebpackPlugin({
template:
__dirname + '/src/index.html',
filename:
'index.html',
inject:
'body'
})
]
};
In the above configuration code “devtool” is used to
generate source map. The “entry” option is used to set entry point from where
the webpack should start. And “output” option is used to set output location
and filename of “bundle.js” that is the compressed version of all js into a
single file.
The “resolve” key is using for automatically finding extensions
like .js or .jsx if we don’t add these extension with the file location while
importing into the react code.
The “module” key is used to add some rules on
js/css or other files excluding certain unnecessary files to be optimized.
We also need to install some dependencies which are needed
for this configuration as follows:
npm install –save-dev css-loader style-loader postcss-loader
autoprefixer url-loader file-loader webpack-cli html-webpack-plugin rimraf
We also need to config babel which can found through this
link below:
No comments:
Post a Comment