webpack3.6.0学习笔记

webpack详解

一、webpack是什么？

现代js应用的静态模块打包工具

核心：进行模块化开发，处理模块化关系，将各种资源模块打包成为一个或多少个包（Bundle）

npm工具（node packages mannager）

与grunt/glup 打包的区别？ grunt/glup是配置一系列的task，并定义task处理事务。依次执行task，让流程自动化。 grunt/glup的工程模块化非常简单，没有用到太多模块化，只需要进行简单的合并压缩即可。

开发时依赖 devDependenices --save-dev 运行时依赖 dependenices

二、使用步骤

1.安装node环境（依赖node环境） 查看安装node版本 ：

node -v

2.安装webpack3.6.0 全局安装

npm install webpack@3.6.0 -g

局部安装

package.json 定义script时 使用局部安装的环境

npm install webpack@3.6.0 --save-dev

三、webpack的基本使用过程

模块化 AMD CMD Common.js

function add(n1,n2) { return n1+n2 } function cheng(n1,n2) { return n1* n2 } module.exports ={ add,cheng } var flag=true const {add,cheng}= require('./mathUtills')

ES6 Modules(自动采用严格模式)

export const name='w'; export const age=18; export const h=188; import {name,age,h} from './info';

npm 命令（处理各种文件的依赖）

webpack ./src/main.js ./dist/bundle.js

入口：./src/main.js 出口：./dist/bundle.js 文件名：webpack.config.js

在HTML文件引入bundle.js即可使用打包好的文件

<script src="./dist/bundle.js"></script>

四、webpack的基本配置

安装path包 初始化node（重命名最好是英文）

npm init

会生成package.json文件，显示当前项目的配置信息

配置文件名：webpack.config.js

const path=require('path') module.exports ={ entry:'./src/bbb.js', // output:'./dist/bundle.js', output:{ path:path.resolve(__dirname,'dist'),//动态获取绝对路径 filename:'b.js', }, }

package.json文件中 npm run build 命令映射 webpack 命令 优先使用本地webpack环境 通过node_modules/.bin/webpack 启动 本地局部打包 终端webpack命令使用全局环境打包

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },

五、webpack使用css的基本配置

webpack 的loader 用于处理js以外的css，图片，less文件等 loader使用步骤

npm安装对应loader在webpack.config.js modules关键字下进行配置 webpack中文网 添加链接描述

处理css文件 style-loader 将模块的导出作为样式添加到 DOM 中 css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码

依赖CSS文件 require('./css/index.css') npm安装style-loader， css-loader，（注意版本问题） npm install style-loader --save-dev npm install --save-dev css-loader style-loader， css-loader，在webpack.config.js modules关键字下进行配置 （webpack读取loader顺序从右到左） module.exports = { module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] } }

六、webpack-less的文件处理

加载和转译 LESS 文件

依赖LESS文件 require("./css/special.less") npm安装less-loader （注意版本问题） npm install --save-dev less-loader less npm install --save-dev css-loader

3.less-loader,在webpack.config.js modules关键字下进行配置 （webpack读取loader顺序从右到左）

module.exports = { ... module: { rules: [{ test: /\.less$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "less-loader" // compiles Less to CSS }] }] } };

七、webpack图片的文件处理

url-loader ： 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL

依赖图url background: url(../img/a3.jpg); npm安装url-loader （注意版本问题） npm install --save-dev url-loader style-loader， css-loader，在webpack.config.js modules关键字下进行配置

limit默认8196（8KB） 小于limite数值 将图片编译为base64位数字

module.exports = { module: { rules: [ { test: /\.(png|jpg|gif|jpeg)$/, use: [ { loader: 'url-loader', options: { limit: 8192 } } ] } ] } }

大于limite数值 将使用file-loader 将文件发送到输出文件夹，并返回（相对）URL

依赖图url background: url(../img/a3.jpg); npm安装file-loader （注意版本问题） npm install --save-dev file-loader

3.file-loader ，在webpack.config.js modules关键字下进行配置 （webpack读取loader顺序从右到左）

module.exports = { ... module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/, use: [ { loader: 'file-loader', options: {} } ] } ] } }

将图片进行打包 图片名是32位hash值 将图片放入一个文件夹 webpack.config.js配置

module.exports = { entry: './src/bbb.js', // output:'./dist/bundle.js', output: { path: path.resolve(__dirname, 'dist'),//动态获取绝对路径 filename: 'b.js', //URL自动拼接 publicPath:'dist/' }, }

将所有图片放入一个文件夹 防止重复 img/name img：文件夹 name ：原名字 hash：8 防止命名冲突+8位hash值 ext：原图片扩展名

options: { //当加载的图片 小于limit时 会将图片编译成base64字符串形式 //大于limit 报错 Cannot find module 'file-loader' 下载npm install --save-dev file-loader limit:10000, name:'img/[name].[hash:8].[ext]' },

八、webpack-babel 使ES6转ES5

babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5

使用ES6Y语法 const {add,cheng}= require('./mathUtills') import {name,age,h} from './info'; npm安装babel-loader （注意版本问题）

webpack 3.x | babel-loader 8.x | babel 7.x

npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env webpack

webpack 3.x babel-loader 7.x | babel 6.x

npm install babel-loader babel-core babel-preset-es2015 webpack babel-loader 在webpack.config.js modules关键字下进行配置 （webpack读取loader顺序从右到左） module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { // presets: ['@babel/preset-env'] presets: ['es2015'] } } } ] }

八、webpack使用 vue的配置

引入vue.js npm install vue --save

vue

import Vue from 'vue' // import App from './vue/app.js' import App from "./vue/App.vue" new Vue({ el:'#app', template:'', data:{ msg:'sss' }, components:{ } }) <div id="app"> <!-- <h2>{{msg}}</h2> --> </div>

runtime-only :代码中不可以有任何template runtime-compiler：可以有template，compiler可用于编译template 修改webpack.config.js配置为runtime-compiler

resolve:{ //省略后缀名 extensions:['.js','.css','.vue'], //别名 alias:{ 'vue$':'vue/dist/vue.esm.js' } } vue组件化开发引入

el 与template区别 el用于指定Vue要管理的DOM ,可以帮助解析其中的指令、事件监听等等。而如果Vue实例中同时指定了template ,那么template模板的内容会替换掉挂载的对应el的模板。模板内容可抽离为三部分书写: template、 script、 style。

//使用vue进行开发 import Vue from 'vue' import App from './vue/app.js' const App={ template:' <h2>{{msg}}</h2>', data(){ return{ msg:'sss' } } new Vue({ el:'#app', template:'<App/>', components:{ App } }) <div id="app"> </div> .vue文件封装处理 安装vue-loader和vue-template-compiler npm install vue-loader vue-templ ate-compiler --save-dev

vue-loader 在webpack.config.js modules关键字下进行配置 vue-loader版本14以上，要配置另外的插件

{ test:/\.vue$/, use:['vue-loader'] }

app.js

export default{ template:'', } `` App.vue ```javascript <template> <div> <h2 class="title">{{msg}}</h2> <Cpn></Cpn> </div> </template> <script> import Cpn from './Cpn.vue' export default { name:'App', components:{ Cpn }, data() { return { msg :'ddd' } }, } </script> <style scoped > .title{ background: pink; } </style>

Cpn.vue

<template> <div> <h2> 我是cpn组件标题</h2> <P>内容</P> <h2>{{name}}</h2> </div> </template> <script> export default { name:'Cpn', data() { return { name:'CPN组件的name' } }, } </script>

九、webpack使用 Plugin

认识plugin plugin是插件的意思,通常是用于对某个现有的架构进行扩展。 webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。loader和plugin区别 loader主要用于转换某些类型的模块,它是一一个转换器。 plugin是插件,它是对webpack本身的扩展,是一个扩展器。使用过程 一:通过npm安装需要使用的plugins某些webpack已经内置的插件不需要安装

二:在webpack configjs中的plugins中配置插件。

添加版权的Plugin BannerPligin（自带插件） webpack configjs中的plugins中配置插件。 plugins:[ new webpack.BannerPlugin('最后版权归不知道谁所有'), //开发阶段不需要丑化 //new UglifyjsWebpackPlugin() ], 打包HTML的plugin HtmlWebpackPlugins 一:通过npm安装需要使用的 HtmlWebpackPlugin npm install html-webpack-plugin --save-dev

二:在webpack configjs中的plugins中配置插件。

const HtmlWebpackPlugins = require('html-webpack-plugin') plugins:[ new webpack.BannerPlugin('最后版权归不知道谁所有'), new HtmlWebpackPlugins({ template:'index.html' }), //开发阶段不需要丑化 //new UglifyjsWebpackPlugin() ], js压缩的Plugin 一:通过npm安装需要使用的plugins npm install uglfji-webpack-plugin@1.1.1-save-dev

二:在webpack configjs中的plugins中配置插件。

const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin') const HtmlWebpackPlugins = require('html-webpack-plugin') module.exports = { plugins:[ new webpack.BannerPlugin('最后版权归不知道谁所有'), new HtmlWebpackPlugins({ template:'index.html' }), //开发阶段不需要丑化 new UglifyjsWebpackPlugin() ], }

十、webpack搭建本地服务器

本地服务器基于node.js搭建,内部使用express框架 本身属性 contentBase :为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要写./dist port:端口号 inline :页面实时刷新 historyApiFallback :在SPA页面中,依赖HTML 5的history模式

安装本地服务器webpack-dev-server@2.9.1 npm nstall-save-dev webpack-dev-server@2.9.1

2.在webpack configjs中的devServer中配置服务的文件夹。

devServer:{ contentBase:'./dist', inline:true } package.json设置打包命令 出现一个localhost网址 复制可打开 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "dev":" webpack-dev-server --open" },

十一、webpack配置文件的分离

文件目录

将webpack configjs分离成 base.config.js , prod.config.js 和 dev.config.js

安装 webpack-merge

npm install webpack-merge --save-dev prod.config.js配置 const webpackMerge=require('webpack-merge') const baseConfig = require('./base.config') const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin') module.exports = webpackMerge.merge(baseConfig,{ plugins:[ //开发阶段不需要丑化 new UglifyjsWebpackPlugin() ], } ) dev.config.js配置 const webpackMerge=require('webpack-merge') const baseConfig = require('./base.config') module.exports = webpackMerge.merge(baseConfig, { devServer:{ contentBase:'./dist', inline:true } }) pack.json配置 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config ./build/prod.config.js", "dev": " webpack-dev-server --open --config ./build/dev.config.js " },

总结

webpack3.6.0的学习笔记，版本较低会出现很多版本错误问题 这边是我目前运行出不报错的loader和plugin版本号。

{ "name": "webpackconfig", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config ./build/prod.config.js", "dev": " webpack-dev-server --open --config ./build/dev.config.js " }, "author": "", "license": "ISC", "devDependencies": { "css-loader": "^3.3.0", "file-loader": "^6.1.1", "html-webpack-plugin": "^3.2.0", "less": "^3.12.2", "less-loader": "^5.0.0", "style-loader": "^1.0.0", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^2.3.0", "vue-loader": "^13.0.0", "vue-template-compiler": "^2.6.10", "webpack-dev-server": "^2.9.1", "webpack-merge": "^5.2.0" }, "dependencies": { "@babel/core": "^7.12.3", "@babel/preset-es2015": "^7.0.0-beta.53", "vue": "^2.6.12", "webpack": "^3.6.0" } }