Let me start with the plugins I used
Use webpack-dev-server
1. Download webpack-dev-server,webpack, and webpack4.0 before installing Webpack-CLI. Otherwise, an error message will be displayed
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
Copy the code
Webpack – dev – server installation
NPM install webpack-dev-server -d // Local installationCopy the code
Install webpack
NPM install webpack -d // local install NPM install webpack -g // global installCopy the code
Install webpack – cli
NPM install webpack-cli -d // Local installCopy the code
2. Create a file in the root directorywebpack.config.js
, the configuration is as follows
// exports of webpack module.exports = {entry: __dirname + '/ SRC /main.js', // import file output: {// export file publicPath: '/dist',// must add publicPath path: __dirname + './dist', filename: 'bundle.js'}, devServer: {host: 'localhost', // access address port: '8080', // access port open: true, // automatic pull browser hot: true // hot loading}, module: {rules: [{test: / \. CSS $/, use: [' style - loader ', 'CSS - loader]}}], plugins: [new webpack. HotModuleReplacementPlugin () / / hot update plugins]}Copy the code
To update the CSS file, use loader to convert it
You need to download CSS-loader and style-loader
npm install css-loader style-loader
Copy the code
I configured it in the Module
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}]
},
Copy the code
3. Configure it in package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack --mode development",
"start": "webpack-dev-server"
},
Copy the code
4. Run
npm run start
Copy the code
Finally, talk about the pit I met!!
I downloaded webpack, webpack-CLI, webpack-dev-serve not compatible!!
Went to the Internet to check the reason for a long time, the original is compatible problem
Later I changed the versions of Webpack, webpack-CLI, and webpack-dev-server and they ran successfully
If you see this screen, you’ve succeeded
Be sure to pay attention to compatibility