其他分享
首页 > 其他分享> > 第一次使用webpack

第一次使用webpack

作者:互联网

webpack是现代流行的一款前端打包工具。一般来说,一个真实的网页往往不使用纯js编写。比如大型网页,我们一般会选择Typescript, Less等产品化工具型语言,或者使用Angular, React 等前端框架。如果是这样写出来的网页往往不是能直接放到浏览器里执行的。   一般来说,我们会先用lessc命令将网页所有的less文件编译成浏览器识别的css文件。再用tsc命令将网页用到的ts文件编译成浏览器识别的js文件。一步步操作完成。   通常产品化的网页维护成本较大,一般我们将步骤合法化到批处理文件或是其他方式,但这些都不适用于真正竞争力充足的商品。   webpack主要就是针对于这些需求自动化完成网页打包的工具。   1.最基本的功能 -- 识别文件依赖,允许使用require等高级语法。   很多浏览器都还不支持require export等语法。webpack原生就支持这种写法,并且能够分析文件依赖。 npm init npm install webpack 编写测试代码:   grapecity.js:   module.exports = function showCompapy(){ console.log('This is Grapecity! We have a new child company'); var gartner = require('./gartner.js'); gartner(); }   gartner.js:   module.exports = function showCompapy(){ console.log('This is Gartner New Guy!'); }   入口文件 main.js: var gc = require("./grapecity.js"); gc();     编写webpack配置,webpack配置就有点类似早期大型网页开发人员编写的批处理文件。 module.exports = { entry: __dirname + '/source/main.js', output: { path: __dirname + '/output', filename: 'bundle.js' }, devtool: "eval-source-map" }     最基本的配置包括: 入口文件:从什么文件开始分析依赖,并不断打包。 产物:一般是一个js文件。 调试工具:生成map文件,方便开发人员调试。
名称 特点
source-map 生成对应的产品源码和webpack源码
eval-source-map   cheap-module-eval-source-map 生成对应的产品源码
cheap-module-source-map 不生成源码
  2.对框架的支持。(非原生支持) npm install react react-dom --save   render.js import React , { Component } from 'react'   export class Painter extends Component{ render(){ return (Painter Component); } }   main.js import React from 'react'; import { render } from 'react-dom'; import { Painter } from './render.js';   window.onload = function () { render( />, document.getElementById('container')); };   直接运行,网页肯定会崩溃。但使用webpack也有错误,因为对框架支持并非是webpack原生支持的功能。   npm install --save-dev babel-core babel-loader babel-preset-env babel-preset-react 安装多个插件   继续扩增webpack.config.js module: { rules: [ { test: /(\.js|\.jsx)$/, use: { loader: "babel-loader", options: { presets: ['env', 'react'] } } }   ] } 在rules增加一项对js jsx文件的处理,使用babel-loader进行处理 presets是Babel的插件,通过 npm install babel-preset安装得到。插件用来转换成es6语法等   注意设置include可以提高速度。 可以把路径也换成绝对路径: var path = require('path') ; path.resolve(__dirname, 'src');   3.对CSS的支持(非原生支持) 还是得先安装下依赖   npm install --save-dev style-loader css-loader 继续扩增下rules,这次针对css文件进行处理 { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] }     postcss-loader 可以增加不同浏览器对css某一属性的支持   4.typescript支持(非原生能支持)   先安装依赖 npm insatll typescript ts-loaer   typescipt可以编写他自己的config tsconfig.json { "compilerOptions": { "module": "commonjs", "target": "es5", "sourceMap": true } }     再次给rules新增一项,这次主要处理ts { test: /\.ts$/, use: { loader: 'ts-loader' } },   添加测试的ts文件 export class Student{ constructor(container:HTMLDivElement){ if(!container){ return; }   container.innerHTML = ' Welcome Typescript! '; } } 入口文件引用 import { Student } from './test.ts';     window.onload = function () { new Student(document.getElementById('container_02')); };     5.原生插件(原生支持,无需安装额外包) 新增一句 var webpack = require('webpack');   新增项: plugins: [ new webpack.BannerPlugin('版权所有,翻版必究') ] 这个从插件可以给最终的js文件开头新增一些话。     一些比较常用的需要安装的插件 npm install html-webpack-plugin   使用 var htmlWebpack = require('html-webpack-plugin');   plugins: [ new webpack.BannerPlugin('版权所有,翻版必究'), new htmlWebpack({ filename: 'index-version-[hash].html', inject: 'head', template:'./source/index.html' }) ], hash是关键字,每次生成的都不一样。生成的html会放在output的path属性里面 注意output的filename也可以带路径的,这样html和最终js产物就不冲突了。 template是模板,有了模板就可以只加js引用了。   6.补充   不一定非的要webpack.config.js 修改配置名字只需要修改package   webpack --config aa.js --progress --display-modules --colors --display-reason   "start": "webpack --config webpack.config.js --display-error-details"

标签:npm,文件,--,第一次,loader,webpack,使用,js
来源: https://www.cnblogs.com/chenyingzuo/p/16440522.html