webpack-基础 webpack-基础

webpack可以做什么？
webpack可以看作是一个模块打包机：它做的事情是，分析项目结构，将JavaScript模块以及不能被浏览器直接运行的拓展语言（Scss，TypeScript等），转换和打包为合适的格式供浏览器使用。
Gulp/Grunt 和 webpack
Grunt/Gulp 一种优化前端开发流程的工具。
工作方式：在配置文件中，指明对某些文件进行编译、组合、压缩等任务的具体步骤，工具可以自动完成这些任务。
WebPack是一种模块化的解决方案。
工作方式：把项目当作整体，通过一个给定的主文件，通过这个主文件找到项目的所有依赖文件，使用loaders处理它们，最后打包为一个或者多个浏览器可识别的javascript文件。
webpack安装

//本地安装 npm iwebpack -D //如果你使用 webpack 4+ 版本，你还需要安装 CLI npm iwebpack-cli -D//全局安装 npm i webpack -g npm i webpack-cli -g//工程构建（开发时、“打包”时）依赖 npm i --save-dev【webpack-基础】//等价于 npm i -D// 项目（运行时、发布到生产环境时）依赖 npm i --save//等价于 npm i -S//创建文件package.json npm init //创建文件夹app/Greeter.js //创建文件app/main.js //创建文件public/index.html

命令一:webpack app/main.js -o public/bundle.js --mode development
问题1：webpack app/main.js public/bundle.js命令报错和警告

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/ERROR in multi ./app/main.js public/bundle.js Module not found: Error: Can't resolve 'public/bundle.js' in '/******/Desktop/webpack/demo' @ multi ./app/main.js public/bundle.js main[1]webpack -v //4.27.1

产生原因：webpack版本过高，原来的命令已经不适用了
解决方法：更换命令
问题2：webpack app/main.js -o public/bundle.js成功和警告

WARNING in configuration The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment. You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

产生原因：黄色警告:是因为webpack4引入了模式,有开发模式,生产模式,无这三个状态
解决方法：更换命令
webpack app/main.js -o public/bundle.js --mode development成功
命令二：webpack

//创建webpack.config.js const path=require('path'); const HtmlWebpackPlugin=require('html-webpack-plugin'); module.exports = { devtool: 'eval-source-map', mode:"development", entry:__dirname + "/app/main.js",//已多次提及的唯一入口文件，_dirname它指向当前执行脚本所在的目录 output: { path: __dirname + "/public",//打包后输出文件的存放地方 filename: "bundle.js"//打包后输出文件的文件名 }， /*entry:{ index:'./src/index', news:'./src/news' }, output:{ path:path.resolve(__dirname,'dest'),//绝对路径 filename:'[name].bundle.min.js' }*/ module:{ rules:[ {test:/\.less$/i,use:['style-loader','css-loader','less-loader']} //less ] }, plugins:[ new HtmlWebpackPlugin({template:path.resolve(__dirname,'./index.html')}) ], devtool:'source-map' }webpack

Path.resolve()
从后向前，
若字符以 / 开头，不会拼接到前面的路径(因为拼接到此已经是一个绝对路径)；
若以 ../ 开头，拼接前面的路径，且不含最后一节路径；
若以 ./ 开头或者没有符号则拼接前面路径；
命令三：npm start / npm run dev /npm run build

//接命令二 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev":"webpack --mode development", "bulid":"webapck --mode production", "start": "webpack" }

命令四：npm run server

npm install --save-dev webpack-dev-server //webpack.config.js devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录 historyApiFallback: true,//不跳转 inline: true//实时刷新 } //package.json "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "webpack --mode development", "bulid": "webapck --mode production", "start": "webpack", "server": "webpack-dev-server --open" } npm run server//http://localhost:8080/

package.json

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server --env.development --open", "build": "webpack --env.production" }

webpack.config.js
1、mode:模式
none 不优化
development 输出调试信
production最高优化，启用压缩，忽略错误
process.env.NODE_ENV
process 是 node 的全局变量，并且 process 有 env 这个属性，但是没有 NODE_ENV 这个属性。
a.这个变量并不是 process.env 直接就有的，而是通过设置得到的。

process.env.NODE_ENV=development process.env.NODE_ENV=production

b.这个变量的作用是：我们可以通过判断这个变量区分开发环境或生产环境。

if(process.env.NODE_ENV === 'development'){ //开发环境 do something }else{ //生产环境 do something }

2、entry:入口
单入口-SPA
多入口-MPA

//单入口 const path=require('path'); module.exports={ mode:'production', entry:'./src/index.js', output:{ path:path.resolve(__dirname,'dest'),//绝对路径 filename:'bundle.min.js' } } //多入口 const path=require('path'); module.exports={ mode:'production', entry:{ index:'./src/index', news:'./src/news' }, output:{ path:path.resolve(__dirname,'dest'),//绝对路径 filename:'[name].bundle.min.js' } }

3、output:输出

{ path:路径-必须是绝对路径 path.resolve filename:文件名 }

4、loader
https://www.webpackjs.com/loaders/
webpack 可以使用 loader来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
文件
raw-loader 加载文件原始内容（utf-8）
val-loader 将代码作为模块执行，并将 exports 转为 JS 代码
url-loader 像 file loader 一样工作，但如果文件小于限制，可以返回 data URL
file-loader 将文件发送到输出文件夹，并返回（相对）URL
json
json-loader 加载 JSON 文件（默认包含）
json5-loader 加载和转译 JSON 5 文件
cson-loader 加载和转译 CSON 文件
转换编译(Transpiling)
script-loader 在全局上下文中执行一次 JavaScript 文件（如在 script 标签），不需要解析
babel-loader 加载 ES2015+ 代码，然后使用 Babel 转译为 ES5
buble-loader 使用 Bublé 加载 ES2015+ 代码，并且将代码转译为 ES5
traceur-loader 加载 ES2015+ 代码，然后使用 Traceur 转译为 ES5
ts-loader 或 awesome-typescript-loader 像 JavaScript 一样加载 TypeScript 2.0+
coffee-loader 像 JavaScript 一样加载 CoffeeScript
模板(Templating)
html-loader 导出 HTML 为字符串，需要引用静态资源
pug-loader 加载 Pug 模板并返回一个函数
jade-loader 加载 Jade 模板并返回一个函数
markdown-loader 将 Markdown 转译为 HTML
react-markdown-loader 使用 markdown-parse parser(解析器) 将 Markdown 编译为 React 组件
posthtml-loader 使用 PostHTML 加载并转换 HTML 文件
handlebars-loader 将 Handlebars 转移为 HTML
markup-inline-loader 将内联的 SVG/MathML 文件转换为 HTML。在应用于图标字体，或将 CSS 动画应用于 SVG 时非常有用。
样式
style-loader 将模块的导出作为样式添加到 DOM 中
css-loader 解析 CSS 文件后，使用 import 加载，并且返回 CSS 代码
less-loader 加载和转译 LESS 文件
sass-loader 加载和转译 SASS/SCSS 文件
postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件
stylus-loader 加载和转译 Stylus 文件
清理和测试(Linting && Testing)
mocha-loader 使用 mocha 测试（浏览器/NodeJS）
eslint-loader PreLoader，使用 ESLint 清理代码
jshint-loader PreLoader，使用 JSHint 清理代码
jscs-loader PreLoader，使用 JSCS 检查代码样式
coverjs-loader PreLoader，使用 CoverJS 确定测试覆盖率
框架(Frameworks)
vue-loader 加载和转译 Vue 组件
polymer-loader 使用选择预处理器(preprocessor)处理，并且 require() 类似一等模块(first-class)的 Web 组件
angular2-template-loader 加载和转译 Angular 组件
6、插件（Plugins）
loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。
HtmlWebpackPlugin
这个插件的主要功能是在打包结束之后，自动在输出目录下生成一个html文件，并把打包生成的JS文件自动的引入到这个html文件中。
npm install --save-dev html-webpack-plugin

const HtmlWebpackPlugin=require('html-webpack-plugin'); const path=require('path'); plugins:[ new HtmlWebpackPlugin({template:path.resolve(__dirname,'./index.html')}) ]

7、devtool:"source-map"