Webpack import CSS and various loader

1. Webpack Import CSS

1) Download the relevant loader NPM install style-loader css-loader -D

2) introducing index.css into the Mian.js

Import './css/index.css '

3) configuration Webpack.config.js

Using the Module property

Const PATH = require (' path '= {    ' development ',    entry:path.join (__dirname,'./src/ Main.js '),// Package The file     output:{        path:path.join (__dirname,'./dist '),        FileName:' bundle.js '    },    devserver:{        Open:' true ',        port:' 8081 ' ,        contentbase:' src '    },    module:{        rules:[            test: {' /\.css$/', use[' style-loader ', ' Css-loader ']}        ]    }}

Restart Run ' npm run Dev '

2.webpack Importing pictures

Since importing images requires a URL address, it is necessary to introduce ' url-loader ' and ' File-loader ' (' File-loader ' depends on ' url-loader ' so need to be introduced together)

NPM i url-loader file-loader -D

. box{  background-image:url ('.. /images/1.jpg ')  }

Configure Webpack.config.js

module:{     rules:[         {test:/\.css$/,use:[' Style-loader ', ' Css-loader ']},        {test: /\.( Jpg|png|gif|bmp|jpeg) $/,use:url-loader? limit=4000&name=[hash:8]-[name].[ EXT]'   }, //If the picture is larger than the limit size it will not be resolved        to Base64//name set whether to rename the picture,  [name].[ EXT] is the name of the picture that keeps the introduction, [Hash:8]-[name]. [ext] is automatically before the original image of a random hash value, to prevent duplication of the picture        ]}

Introduction of Babel in 3.webpack

For advanced ES6 syntax that some browsers do not recognize, use ' Babel ' to convert

NPM Install Babel-core Babel-loader babel-plugin-transform-runtime-d//Conversion Tool

NPM Install babel-preset-env babel-preset-stage-0-d//syntax

Configuring in Webpack.config.js

module:{   rules:[        {test:/\.js$/,use: ' Babel-loader ',exclude:/node_modules /}        
]}

New '. BABELRC ' ' Babel ' configuration file in the root directory of the project (JSON format, required to conform to JSON specification)

{    "plugins": ["Transform-runtime"],    "presets": ["env", "stage-0"]}

Using templates in 4.webpack, you need to parse the. Vue file

NPM Install Vue-loader vue-template-compiler-d

Configuration in Webpack.config.js

Const Vueloaderplugin = require (' Vue-loader/lib/plugin '); = { plugins:[   new   Vueloaderplugin (),], module:{rules:[{test: /\.vue$/,use: ' Vue-loader '},]},}

High version of Webpack use Vue-loader when you need to configure the next plugin (the blue part)

Webpack import CSS and various loader