Foreplay
Webpack itself can only handle JavaScript module, if you want to deal with other types of files, you need to use in conjunction with plug-ins that are called in Webpack in Loader (Loader) to be converted.
Loader can be understood as converter modules and resources, which itself is a function of the parameter source file is accepted, the return value is the result of the conversion.
In this way, we will be able to load any type of file through a module or require or import, such as CSS, images.
Packaging css resources
To package css resources, to install the style-loader and css-loader dependence
css css-loader is loaded into JavaScript;
style-loader is to know css javascript
npm install --save-dev style-loader css-loader
Modify webpack.config.js file, add the model parameters
// introduction path node in the module, the processing of the file path gadget const = path the require ( 'path' ) // derived webpack having a special object property configuration of module.exports = { MODE: 'none', // specified pattern configuration: "Development" | "Production" | "none" @ entrance entry: './src/main.js', // inlet module file path @ outlet Output: { // path: './dist/' , error, an absolute path to specify the path: path.join (__ dirname, './dist/'), // packaged results generated directory file path if the absolute filename: 'bundle.js' }, Module1: { // modules rules:[ // Rules { The Test: /\.css$/, // regular expression matching .css file resources, without the quotation marks use: [ // Loader used, note the order can not be wrong 'style-Loader' , 'CSS-Loader' ] } ] } }
Create a folder in the src folder css files, css folder, create a style.css
style.css
body { background: red;}
Style.css only introduced in main.js
// module by importing css, eventually packaged into js, packaged in bundle.js the import './css/style.css'
Repackaged compilation
npm run build
After packing, see bundle.js, we have found js css styles to the way the introduction of
Access index.html, look at the background is not into red
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script src="./dist/bundle.js"></script> </body> </html>
After a review of source code F12 index.html, in fact, the CSS file's contents to a JavaScript module, and then when you run JavaScript, dynamic style will use <sytle> tag role in the page <head> tag
Packaging image resources
File-loader is mounted reliance
npm install --save-dev file-loader
Modify webpack.config.js
// introduction path node in the module, the processing of the file path gadget const = path the require ( 'path' ) // derived webpack having a special object property configuration of module.exports = { MODE: 'none', // specified pattern configuration: "Development" | "Production" | "none" @ entrance entry: './src/main.js', // inlet module file path @ outlet Output: { // path: './dist/' , error, an absolute path to specify the path: path.join (__ dirname, './dist/'), // packaged results generated directory file path if the absolute filename: 'bundle.js' }, Module1: { // modules rules:[ // Rules { The Test: /\.css$/, // regular expression matching .css file resources, without the quotation marks use: [ // Loader used, note the order can not be wrong 'style-Loader' , 'CSS-Loader' ] }, { Test: /\.(png|svg|jpg|gif)$/, // matching image resource use: [ 'File-Loader' ] } ] } }
The next clip 1.jpg put css file
Modify style.css
body{ background: red; background-image: url(./1.jpg) }
Packaged compilation
npm run build
index.html in the root directory access, background did not show up
problem:
- If direct access to the index.html in the root directory, then the path will not be able to access the resource picture to.
- Solution: index.html is to put dist directory.
- But dist package is the result of compilation, rather than source code, so the index.html into dist inappropriate.
- And then if we once packed the result file name bundle.js changed, then you have to manually modify index.html.
- Based on the above problems encountered, you can use a plug-in: html-webpack-plugin to solve.
Use HtmlWebpackPlugin plug
Now directory structure
Role: the file path to solve the problem
The package index.html to the directory where the bundle.js
But also in the automatic index.html <script> incorporated bundle.js
Install plug
npm install --save-dev html-webpack-plugin
Modify webpack.config.js
// introduction path node in the module, the processing of the file path gadget const = path the require ( 'path' ) // introduced widget const = HtmlWebpackPlugin the require ( 'HTML-WebPACK-plugin' ); // deriving a WebPACK with special properties configuration object module.exports = { mODE: 'none', // designation mode configuration: "Development" | "Production" | "none" // inlet entry: './src/main.js', // entry module file path // export the Output: { // path: './dist/', wrong, to specify the absolute path path: path.join (__ dirname, './dist/'), // packaged files generated results If the absolute directory path filename: 'bundle.js' }, // configure the plug- plugins: [ new new HtmlWebpackPlugin ({ // Specify packaged template page // will be index.html packed into the same directory where the bundle.js, // and it will automatically use the index.html script tag introduced bundle.js Template: './index.html' }) ], Module1: { the rules: [ // configuration conversion rule { Test: /\.css$/, // Note that not a single quotation mark, a regular expression, matching .css file resource use: [ // according to the order of foreigners accustomed to, but do not order wrong 'style-Loader', // JS recognition css 'CSS-Loader' // CSS convert JS ] }, { Test: /\.(png|svg|jpg|gif)$/ , use: [ 'File-Loader' ] } ] } }
Modify index.html, under simulated vue page
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!- After configuring HtmlWebpackPlugin plug-in, without having to manually introduce bundle.js,<! --> because it will automatically introduce it into the <Script the src = "./ dist / bundle.js"> </ Script> -> < div ID = "App" > </ div > </ body > </ HTML >
Repackaging
npm run build
After running, you will find that there is more than a index.html under the dist directory, and files automatically in the bundle.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!- After configuring HtmlWebpackPlugin plug-in, without having to manually introduce bundle.js,<! --> because it will automatically introduce it into the <Script the src = "./ dist / bundle.js"> </ Script> -> < div ID = "App" > </ div > < Script type = "text / JavaScript " the src =" bundle.js " > </ Script > </ body > </ HTML >
Run dist / index.html file, it displays the normal background. Do not run the index.html in the root directory
