Note ---- About Webpack

时间 2019-11-14

标签 note webpack 繁體版

原文原文链接

1.新建webpack文件夹javascript

2.npm init 生成 package.jsoncss

3.局部安装
npm install --save-dev webpack
全局安装
npm install -g webpackhtml

4.入口文件java

app.jswebpack

var greeter = require('./cats.js'); 
greeter();

cat.jsgit

// cat.js 
module.exports = function() { 
document.getElementById('contain').innerHTML="Hello World"; 
};

index.htmlgithub

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Webpack Sample Project</title> 
</head> 
<body> 
<div id='contain'> 
</div> 
<script src="dist/bundle.js"></script> 
</body> 
</html>

5.配置webpack
新建项目配置 web

webpack.config.jsnpm

module.exports = { 
entry: './src/app.js', 
output: { 
path: './dist', 
filename: 'bundle.js' 
} 
};

6.执行命令 webpack
便可在根目录下生成一个dist文件夹中bundle.jsjson

项目结构

entry 是页面中的入口文件，好比我这边的入口文件时main.js
output: 是指页面经过webpack打包后生成的目标文件放在什么地方去，我这边是在根目录下生成build文件夹，该文件夹内有一个build.js文件；
resolve: 定义了解析模块路径时的配置，经常使用的就是extensions; 能够用来指定模块的后缀，这样在引入模块时就不须要写后缀，会自动补全。
plugins: 定义了须要使用的插件，好比commonsPlugin在打包多个入口文件时会提取公用的部分，生成common.js;module.loaders：是文件的加载器，好比咱们以前React须要在页面中引入jsx的js源码到页面上来，而后使用该语法，可是经过webpack打包后就不须要再引入JSXTransformer.js；看到上面的加载器；好比jsx-loader加载器就是表明JSXTransformer.js的，还有style-loader和css-loader加载器；所以在使用以前咱们须要经过命令把它引入到项目上来；

关于加载器
jsx-loader加载器 jsx文件
npm install jsx-loader --save-dev

Style-loader加载器加载css文件
npm install style-loader --save-dev

css-loader 加载器加载css文件
npm install css-loader --save-dev

less-loader加载器将less编译成css文件
npm install less-loader --save-dev

url-loader加载器 js中加载png/jpg格式的图片文件
npm install less-loader --save-dev

也能够一块儿写
npm install css-loader less-loader style-loader --save-dev

关于webpack命令
webpack // 最基本的启动webpack的方法
webpack -w // 提供watch方法；实时进行打包更新
webpack -p // 对打包后的文件进行压缩
webpack -d // 提供source map，方便调式代码

项目下载
https://github.com/MMMsCheng/webpackCourse

蟹蟹http://www.cnblogs.com/tugenhua0707/p/4793265.html

1. some note about js
2. note about set theory
3. Some more technical details about SAP note
4. about
5. git 没法push远程仓库 Note about fast-forwards
6. RunLoop Note
7. About - CONNECT_BY_FILTERING
8. english note
9. 2019.9.5 note
10. About
更多相关文章...
• ASP.NET MVC - 视图 - ASP.NET 教程
• ASP.NET MVC - 控制器 - ASP.NET 教程
• Kotlin学习（一）基本语法