Run npm start
for a dev server. Navigate to http://localhost:8080/
. The app will automatically reload if you change
any of the source files.
- Use the
npm run start:prod
command for a production dev server.
Run npm run build
to build the project. The build artifacts will be stored in the public/
directory.
- Use the
npm run build:prod
command for a production build. - Use the
npm run build:sourcemap
command for a build with sourcemap. - Use the
npm run build:prod:sourcemap
command for a production build with sourcemap.
Run npm run watch
to watch the project. The build artifacts will be stored in the public/
directory.
- Use the
npm run watch:prod
command for a production watch. - Use the
npm run watch:sourcemap
command for a watch with sourcemap. - Use the
npm run watch:prod:sourcemap
command for a production watch with sourcemap.
Run npm run lint
to find problematic patterns or code that doesn’t adhere to certain style guidelines in the
project. You can also use npm run lint-fix
to fix them.
- Anchor - https://gitlab.com/izumi-it-company/webpack-iic/snippets/1874134
- LazyLoad - https://gitlab.com/izumi-it-company/webpack-iic/snippets/1873799
By default, html files are tracking in the src
directory.
webpack.config.js
const indexChunk = getHtmlWebpackPlugins( './src', 'html' );
const allHtmlChunk = [ ...indexChunk ];
For example, add tracking of html files in the src/work
directory.
webpack.config.js
const indexChunk = getHtmlWebpackPlugins( './src', 'html' );
const workChunk = getHtmlWebpackPlugins( './src/work', 'html' );
const allHtmlChunk = [ ...indexChunk, ...workChunk ];
<meta name="description" content="<%= htmlWebpackPlugin.options.description %>">
<meta name="keywords" content="<%= htmlWebpackPlugin.options.keywords %>">
webpack.config.js
const DEFAULTS = { description: 'description', keywords: 'keywords' };
Use commonJs or ES module
- CommonJs
https://requirejs.org/docs/commonjs.html - ES module
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
For example, download Swiper npm i swiper
and use them in js file.
import Swiper from 'swiper';
const mySwiper = new Swiper('.swiper-container', { /* ... */ });
Paste YOUR_LOCAL_IP
address to host property as string. Navigate to http://YOUR_LOCAL_IP:8080/
Run npm run ip
to see your local addresses
webpack.config
/* devServer */
config.devServer = {
contentBase: path.resolve(__dirname, './src'),
host: 'YOUR_LOCAL_IP',
port: 8080,
stats: 'minimal',
overlay: true,
hot: IS_HOST,
watchContentBase: true,
open: true,
};