标签：npm 文件 -- 第一次 loader webpack 使用 js
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
本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。
