Basic use of Webpack

Packaging tools, compression, compatibility, code specification, syntax conversion.

The installation

npm i webpack webpack-cli -g
Copy the code

I personally like to install and then global, can be directly in the terminal with the webpack command package

Webpack -v // Check the version to see if the installation is completeCopy the code

Then create the SRC folder, create the index.js file within SRC, and execute the downlink command to automatically pack it

Webpack -- Mode development // Packaged as a development environmentCopy the code

The dist file is generated and the main.js file is executed, and the result is the same as the SRC file

configuration

It’s always been the default, but the whole process is configurable, you know, packaging the starting file, generating the file, whatever.

Start by creating a webpack.config.js file

JavaScript packaging configuration

Where is the package from which we call the import file, and the package generated is called the export file

const {resolve} = require('path')// Import the path module's resolve method

module.exports = {
    mode:'production'.// Production mode is now configured to run the environment

    entry:'./all/index.js'.// Entry file, single entry

    / / entry: ['. / all/index. Js', '. / all/add. Js'], / / entry documents, multiple entry documents
    
    // entry:{
    // one:'./all/index.js',
    // two:'./all/add.js'
    }, // entry file, multi-entry object writing

    // entry:{
    // one:['./all/index.js','./all/add.js']
    }, // entry file, multi-entry object addend group writing, will combine two files into one file output

    output: {filename:'last.js'.// The export file is called last.js, a single export
        path:resolve(__dirname,'web')  // The generated path is in the web
    }

    // output:{
    // filename:'[name].js', // the export filename is the same as the attribute name of the object's multi-entry, multi-exit
    // path:resolve(__dirname,'web') // Generate path under web
    // }
};

   
Copy the code

HTML packaging configuration

Import the HTML – webpack – the plugin

npm i html-webpack-plugin -D
Copy the code

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')/ / import HTML - webpack - the plugin

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},plugins: [/ / the plugin
        // new htmlWebpackPlugin()// Create an HTML by default and import JS

        new htmlWebpackPlugin({
            template:'./all/index.html'.// Reference your own HTML
            filename:'last.html'.// The name of the generated HTML file
            minify: {/ / collapseWhitespace: true, / / remove the Spaces
                removeComments:true// Remove comments
            },
            //chunks:['one','two']// chunks:['one','two'}})];Copy the code

CSS packaging configuration

I need the package

npm i css-loader style-laoder -D
Copy the code

Create a CSS file and import it in the import file

require('./XXXX.css')
Copy the code

The configuration file

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},module: {rules:[
            {
                test:/\.css$/.// Configure files that end with.css
                use:['style-loader'.'css-loader']// Configure style-loader(to export CSS external resources), csS-loader (to insert CSS into HTML), from top to bottom, from right to left}},plugins: [new htmlWebpackPlugin({
            template:'./all/index.html'.filename:'last.html'.minify: {removeComments:true}})]};Copy the code

Configure less or SASS

Download the required packages

less

npm i less less-loader -D
Copy the code

sass

npm i node-sass sass-loader -D
Copy the code

Import files like CSS

The configuration file

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},module: {rules:[
            { test:/\.css$/,use:['style-loader'.'css-loader'] {},test:/\.less$/,use:['style-loader'.'css-loader'.'less-loader']},// Convert less to CSS
            { test:/\.scss$/,use:['style-loader'.'css-loader'.'sass-loader']}// Just like CSS, SCSS is converted to CSS first]},plugins: [new htmlWebpackPlugin({
            template:'./all/index.html'.filename:'last.html'.minify: {removeComments:true}})]};Copy the code

The above method imports the CSS inline, now pull the CSS file out of a separate file and make it an external style

Install the required packages

cnpm i mini-css-extract-plugin -D
Copy the code

The configuration file

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')/ / import mini - CSS - extract - the plugin

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},module: {rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader']},/ / to replace style - loader with miniCssExtractPlugin. Loader
            { test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader'.'less-loader'] {},test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader'.'sass-loader']]}},plugins: [new htmlWebpackPlugin({
            template:'./all/index.html'.filename:'last.html'.minify: {removeComments:true}}),new miniCssExtractPlugin({// Create miniCssExtractPlugin object
            filename:'./last.css'// The generated CSS file name})]};Copy the code

CSS Compatible Configuration

Download the required packages

cnpm i postscc-loader postcss-preset-env -D
Copy the code

configuration

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},module: {rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader'.'postcss-loader']},// Add postCSS-loader for compatibility processing
            { test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader'.'less-loader'.'postcss-loader'] {},test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader'.'sass-loader'.'postcss-loader']]}},plugins: [new htmlWebpackPlugin({
            template:'./all/index.html'.filename:'last.html'.minify: {removeComments:true}}),new miniCssExtractPlugin({
            filename:'./last.css'})]};Copy the code

Create the poastcss.config.js file

module.exports={
    plugin: [require('postcss-preset-env') ()// Import the postCSs-PRESET -env plugin]}Copy the code

Handle compatible browsers within package.json

 "browserslist": ["0.2%" >.// More than 80% of browsers
    "last 2 versions".// The last two versions
    "not dead"                         // Remove the missing browser
  ]
Copy the code

CSS compression

Install the required packages

cnpm i optimize-css-assets-webpack-plugin -D
Copy the code

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')/ / import

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},module: {rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader'.'postcss-loader'] {},test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader'.'less-loader'.'postcss-loader'] {},test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader'.'sass-loader'.'postcss-loader']]}},plugins: [new htmlWebpackPlugin({
            template:'./all/index.html'.filename:'last.html'.minify: {removeComments:true}}),new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()// Create an object]};Copy the code

Configure the picture

Download the required packages

cnpm i url-loader file-loader -D
Copy the code

cnpm i html-loader -D
Copy the code

configuration

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')/ / import

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},module: {rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader'.'postcss-loader'] {},test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader'.'less-loader'.'postcss-loader'] {},test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader'.'sass-loader'.'postcss-loader'] {},test:/\.(png|jpg|jpeg|gif)$/,
                loader:'url-loader'.option: {publicPath:'./img/'.// The public path to import
                    outputPath:'img/'.// Packaged files
                    limit:1024 * 8.// Base64 is base64
                    name:'[name][hash:10].[ext]'// The image name is the first ten hash of the name. The file name}}, {test:/\.html$/,
                loader:'html-loader'// Specializes in processing images imported within HTML}},plugins: [new htmlWebpackPlugin({
            template:'./all/index.html'.filename:'last.html'.minify: {removeComments:true}}),new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()// Create an object]};Copy the code

Configuring Other Files

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')/ / import

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},module: {rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader'.'postcss-loader'] {},test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader'.'less-loader'.'postcss-loader'] {},test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader'.'sass-loader'.'postcss-loader'] {},test:/\.(png|jpg|jpeg|gif)$/,
                loader:'url-loader'.option: {publicPath:'./img'.outputPath:'img/'.limit:1024 * 8.name:'[name][hash:10].[ext]'}}, {test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/.// Exclude these files
                loader:'file-loader'.options: {publicPath:'./font'.outputPath:'font/'.name:'[name][hash:10].[ext]'}}},plugins: [new htmlWebpackPlugin({
            template:'./all/index.html'.filename:'last.html'.minify: {removeComments:true}}),new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()// Create an object]};Copy the code

Configuring the Server

Download the required packages

npm i webpack-dev-server -g
Copy the code

Then run it in terminal Webpack Serve

configuration

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')/ / import

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},module: {rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader'.'postcss-loader'] {},test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader'.'less-loader'.'postcss-loader'] {},test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader'.'sass-loader'.'postcss-loader'] {},test:/\.(png|jpg|jpeg|gif)$/,
                loader:'url-loader'.options: {publicPath:'./img'.outputPath:'img/'.limit:1024 * 8.name:'[name][hash:10].[ext]'}}, {test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/,
                loader:'file-loader'.options: {publicPath:'./font'.outputPath:'font/'.name:'[name][hash:10].[ext]'}}},plugins: [new htmlWebpackPlugin({
            template:'./all/index.html'.filename:'last.html'.minify: {removeComments:true}}),new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()// Create an object].target:'web'.// Update immediately
    devServer: {contentBase:resolve(__dirname,'web'),// Open the page
        port:3000.// Enable the port
        open:true.// Automatically open the page
        compress:true// Use gzip compression}};Copy the code

JavaScript syntax checking

I need the package

cnpm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D
Copy the code

The configuration file

const {resolve} = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const miniCssExtractPlugin=require('mini-css-extract-plugin')
const optimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin')/ / import

module.exports = {
    mode:'development'.entry:'./all/index.js'.output: {filename:'last.js'.path:resolve(__dirname,'web')},module: {rules:[
            { test:/\.css$/,use:[miniCssExtractPlugin.loader,'css-loader'.'postcss-loader'] {},test:/\.less$/,use:[miniCssExtractPlugin.loader,'css-loader'.'less-loader'.'postcss-loader'] {},test:/\.scss$/,use:[miniCssExtractPlugin.loader,'css-loader'.'sass-loader'.'postcss-loader'] {},test:/\.(png|jpg|jpeg|gif)$/,
                loader:'url-loader'.options: {publicPath:'./img'.outputPath:'img/'.limit:1024 * 8.name:'[name][hash:10].[ext]'}}, {test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(js|json|html|css|less|scss|png|gif|jpg|jpeg)$/,
                loader:'file-loader'.options: {publicPath:'./font'.outputPath:'font/'.name:'[name][hash:10].[ext]'}}, {test:/\.js$/,
               exclude:/node-modules/,
               loader:'eslint-loader'.options: {fix:true// Automatically modify errors}}},plugins: [new htmlWebpackPlugin({
            template:'./all/index.html'.filename:'last.html'.minify: {removeComments:true}}),new miniCssExtractPlugin({
            filename:'./last.css'
        }),
        new optimizeCssAssetsWebpackPlugin()
    ],

    target:'web'.devServer: {contentBase:resolve(__dirname,'web'),
        port:3000.open:true.compress:true}};Copy the code

Package. The json configuration

  "eslintConfig": {
    "extends": "airbnb-base"
  }
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Webpack review

Basic use of Webpack

The installation

configuration

JavaScript packaging configuration

HTML packaging configuration

CSS packaging configuration

Configure less or SASS

CSS Compatible Configuration

CSS compression

Configure the picture

Configuring Other Files

Configuring the Server

JavaScript syntax checking

Webpack review

Basic use of Webpack

The installation

configuration

JavaScript packaging configuration

HTML packaging configuration

CSS packaging configuration

Configure less or SASS

CSS Compatible Configuration

CSS compression

Configure the picture

Configuring Other Files

Configuring the Server

JavaScript syntax checking

Related Posts

Vuex-persistedstate Easy to use

About Farrow: The type-friendly functional style Node.js Web framework

Invalid el-dropdown-item@click in ElementUI