26.webpack Getting Started

Webpack official:

https://webpack.js.org/
http://webpack.github.io/

Chinese:

https://www.webpackjs.com/

Information:

1190000006178770

Learning Portal:

Official website----->1 Chinese Document--guide
????? 2 Start now
-------------------------------------------------------------

Installing Webpack:1, 3.x

Install CNPM i-d [email protected]
Uninstall NPM un-d Webpack

2, 4.x

Installing CNPM i-d webpack webpack-cli

Partial Installation Verification version:

WEBPACK-V Error--Global installation

1, Node_modules/.bin/webpack-v
2, Npx Webpack-v
3. Project Document Package.json

"scripts": {        "test": "webpack -v"     },运行npm run test

WEBPACK3 Translator Es6-->es5 Babel

Webpack SRC Dist

NPX Webpack js/index.js Dist/index.bundle.js

The file will not be compressed!

WEBPACK4 Translator Es6-->es5 Babel

Webpack--mode=development Src-o Dist the right format

NPX webpack--mode=development js/index.js dist/index.bundle.js--->main.js

NPX webpack--mode=development js/index.js--output dist/index.bundle.js

The file will be compressed!

Abbreviation: Webpack--mode=development

Prerequisites:
1. Source src must be src/index.js
??????? Output: Default Dist/main.js

-------------------------------------------------------------

Configuration file: Webpack.config.js

Execution: Webpack

Specify to execute a specific file: must take--config

Webpack--config Webpack.dev.config.js

-------------------------------------------------------------

Loader: processing Resources = = processing from right to left = =CNPM i-d Style-loader Css-loader

Css-loader: Loading CSS files
Style-loader: Process style page Generation style label

Sass
CNPM i-d Sass-loader Node-sass

Less
CNPM i-d Less-loader Less
------------------------------------------------------

CNPM i-d Url-loader File-loader

File-loader: Processing files simply copy files to target path rename
Url-loader dependent File-loader: Turn files into base64

Exp:

  module.exports = {mode: "Development", Entry: "./src/index.js",//Introduction module./output:{path: ' ${__di                 rname}/dist/',//must be an absolute path to filename: "Index.bundle.js"}, module: {rules: [{                 Test:/\.css$/, use: [' Style-loader ', ' Css-loader '}},//sass { Test:/\.scss$/, use: [' Style-loader ', ' css-loader ', ' Sass-loader ']},/             /less {test:/\.less$/, use: [' Style-loader ', ' css-loader ', ' Less-loader '] }, {test:/\. (PNG|JP (e) g|gif) $/, use: ["Url-loader"]}]}}  

model:{ 模块、包        rules:[ //规则                {test:/正则/，use:[xxxx-loader]}  use:使用什么loader进行处理        ]}indes.jsimport $ from "jquery";import "./asset/1.css";import img from "./asset/111.jpg"$(function(){    $("#div1").click(function(){        //$(this).addClass("active");        // alert(img);        $(this).css({            width:"330px",            height:"495px",            background:`url(${img})`        });    });});

Res:

Generate page index.html

CNPM i-d Html-webpack-plugin

New Htmlwebpackplugin ()

new HtmlWebpackPlugin({    //title: ‘My App‘,    template: ‘public/index.html‘,用户模板文件    filename: ‘index.html‘,  生成的页面   可以不写  默认就是index.html    hash:true  防止js/css缓存})

Extracttextwebpackplugin replaced by Webpack4 in the mini-css-extract-plugin

CNPM i-d Mini-css-extract-plugin

mini-css-extract-plugin++ application scenarios are only ++! during the development phase
+ + in the production phase change to style++

--watch abbreviated-W Real-time compilation problem cannot actively refresh page Webpack-dev-server server

cannot be compiled in real time, can refresh the page in real time

CNPM i-d Webpack-dev-server

Webpack.config.js

Const WEBPACK = require (' Webpack '); const PATH = require ("path"); Const Htmlwebpackplugin = require (' Html-webpack-plugin ' ); Const Minicssextractplugin = require ("Mini-css-extract-plugin");//Webpack--mode=development src/index.js--output Dist/main.jsmodule.exports = {mode: "Development", Entry: "./src/index.js",//module./output:{Path:path.resol ve (__dirname, "dist"),//absolute path filename: "Main.js"}, Devserver: {contentbase: "./dist",//Resource directory Www/publi        C Index: ' Main.js ', Host: ' localhost ', port:9000, open:true,//--open hot:true, Compress:true,//gzip compression//proxy: {//'/api ': {//target: ' Https://other-server.example. COM ',///Secure:false//}//}}, module: {rules: [////{test:/\.                  css$/, use: ["Style-loader", "Css-loader"]}, {test:/\.css$/, use: [ Minicssextractplugin.loAder, "Css-loader"]}, {test:/\. ( PNG|JP (e)? g|gif|svg|icon) $/,use: ["File-loader"]},]}, plugins: [New Webpack. Namedmodulesplugin (), New Webpack. Hotmodulereplacementplugin (), New Webpack. Bannerplugin (' All rights reserved, pirated copy required '),//new htmlwebpackplugin () New Htmlwebpackplugin ({Template: ' Public/in            Dex.html ', filename: ' index.html ', hash:true}), new Minicssextractplugin ({ FileName: "[name].css", Chunkfilename: "[Id].css"})]}

Css/url/file/babel/vue-loader

CSS Detach (mini-css-extract-plugin)
Htmlwebpackplugin
Htmlwebpackplugin--clean ...

Babel

26.webpack Getting Started