1、初始化，将你的控制台终端切换到某个目录下，执行命令
mkdir webpack_demo新建文件夹
cd webpack_demo切换到新建的文件夹
npm init初始化你的项目，这里会让你填一些基本信息，看着填就行
npm install –save-dev webpack安装webpack
2、建立相关目录
首先进入我们建立的webpack_demo目录（每个人建立的位置不同，可能建立在了D盘或者E盘）。
进入后在根目录建立两个文件夹，分别是src文件夹和dist文件夹：
src文件夹：用来存放我们编写的javascript代码，可以简单的理解为用JavaScript编写的模块。
dist文件夹：用来存放供浏览器读取的文件，这个是webpack打包成的文件。
文件夹建立好后，我们在dist文件下手动建立一个index.html文件，并写入下面的代码。
/dist/index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jspang webpack</title> <style> .shadow{ width: 240px; height: 180px; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.7) 0px, rgba(0, 0, 0, 0.4) 140px); border-radius: 4px; overflow: hidden; } </style> </head> <body> <div id="title"></div> <script src="./bundle.js"></script> </body> </html> |
接下来在src文件夹下建立entery.js的文件，用于编写我们的JavaScript代码，也是我们的入口文件。
src/entery.js
|
1 |
document.getElementById('title').innerHTML='Hello Webpack'; |
3、打包
Webpack其实是可以在终端（命令行）中使用的，基本使用方法如下：
webpack {entry file} {destination for bundled file}
{entry file}:入口文件的路径，本文中就是src/entery.js的路径；
{destination for bundled file}:填写打包后存放的路径。
webpack src/entery.js dist/bundle.js
4、配置文件webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
const path = require('path'); module.exports={ //入口文件的配置项 entry:{ entry:'./src/entry.js', //这里我们又引入了一个入口文件 entry2:'./src/entry2.js' }, //出口文件的配置项 output:{ //输出的路径，用了Node语法 path:path.resolve(__dirname,'dist'), //输出的文件名称 filename:'[name].js' }, //模块：例如解读CSS,图片如何转换，压缩 module:{}, //插件，用于生产模版和各项功能 plugins:[], //配置webpack开发服务功能 devServer:{} } |
entry：配置入口文件的地址，可以是单一入口，也可以是多入口。
output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。
module：配置模块，主要是解析CSS和图片转换压缩等功能。
plugins：配置插件，根据你的需要配置不同功能的插件。
devServer：配置开发服务功能，后期我们会详细讲解。
执行webpack即可打包
//===========================================================
统一出口的配制方法
|
1 2 3 4 5 6 7 8 9 10 |
entry: { //入口文件的配置项 entry: './src/entry.js', entry2:'./src/entry2.js', }, output: { //出口文件的配置项 //打包的路径文职 path: path.resolve(__dirname, 'dist'), //打包的文件名称 filename:'[name].js' }, |
有时候可能我们想把不同的js文件输出到不同的目录，可能就需要用到下面的方法。
不同出口的配置方法1
|
1 2 3 4 5 6 7 8 9 10 |
entry: { //入口文件的配置项 'entry': './src/entry.js', '/otherdir/index':'./src/js/index.js'// '/otherdir'是针对dist下的相对路径 }, output: { //出口文件的配置项 //打包输出的文件夹 path: path.resolve(__dirname, 'dist'), //打包的文件名称 filename:'[name].js' }, |
不同出口的配置方法2
|
1 2 3 4 5 6 7 8 9 10 |
entry: { //入口文件的配置项 'entry': './src/entry.js', 'js/index':'./src/js/index.js' }, output: { //出口文件的配置项 //打包的路径 //path: path.resolve(__dirname, 'dist'), //打包的文件名称 filename:'./dist/[name].js' }, |
//以上两种都可以打包成功，但是在webpack-dev-server启动不了服务器，不知道为啥
========================================================================================//
5、设置webpack-dev-server
先用npm install webpack-dev-server –save-dev 来进行下载。下载好后，需要配置一下devServer。最简单的devServer配置项只有四个。先看一下代码，然后我再作解释。
/webpack.config.js
|
1 2 3 4 5 6 7 8 9 10 |
devServer:{ //设置基本目录结构 contentBase:path.resolve(__dirname,'dist'), //服务器的IP地址，可以使用IP也可以使用localhost host:'localhost', //服务端压缩是否开启 compress:true, //配置服务端口号 port:1234 } |
contentBase:配置服务器基本运行路径，用于找到程序打包地址。
host：服务运行地址，建议使用本机IP，这里为了讲解方便，所以用localhost。
compress：服务器端压缩选型，一般设置为开启，如果你对服务器压缩感兴趣，可以自行学习。
port：服务运行端口，建议不使用80，很容易被占用，这里使用了1234.
注意：这里需要使用npm 来进行安装webpack-dev-server了， 命令如下：
npm install webpack-dev-server –save-dev
在package.json里配置一下scripts选项就可以执行了。
/package.json
|
1 2 3 |
"scripts": { "server":"webpack-dev-server" }, |
配置好保存后，在终端里输入 npm run server 打开服务器。然后在浏览器地址栏输入http://localhost:1234就可以看到结果了。
6、Loaders
Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通过使用不同的Loader，Webpack可以的脚本和工具，从而对不同的文件格式进行特定处理。
简单的举几个Loaders使用例子：
可以把SASS文件的写法转换成CSS，而不在使用其他转换工具。
可以把ES6或者ES7的代码，转换成大多浏览器兼容的JS代码。
可以把React中的JSX转换成JavaScript代码。
注意：所有的Loaders都需要在npm中单独进行安装，并在webpack.config.js里进行配置。下面我们对Loaders的配置型简单梳理一下。
test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的；
use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错；
include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）；
query：为loaders提供额外的设置选项（可选）。
明白了Loader是什么后，就开始这节课的正题，如何打包CSS文件。
loaders配置：
修改webpack.config.js中module属性中的配置代码如下：
webpack.config.js
|
1 2 3 4 5 6 7 8 |
module:{ rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, |
loader的三种写法：
第一种写法：直接用use。
|
1 2 3 4 5 6 7 8 |
module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] } ] }, |
第二种写法：把use换成loader。
|
1 2 3 4 5 6 7 8 |
module:{ rules:[ { test:/\.css$/, loader:['style-loader','css-loader'] } ] }, |
第三种写法：用use+loader的写法：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
module:{ rules:[ { test:/\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader" } ] } ] }, |
7、file-loader与url-loader
file-loader和url-loader的关系。简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，
即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。
url-loader工作分两种情况：
1.文件大小小于limit参数，url-loader将会把文件转为DataURL（Base64格式）；
2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。
也就是说，其实我们只安装一个url-loader就可以了。
file-loader：解决引用路径的问题，拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
url-loader：如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
8、css与js分离之extract-text-webpack-plugin
安装：npm install –save-dev extract-text-webpack-plugin
引入：
|
1 |
const extractTextPlugin = require("extract-text-webpack-plugin"); |
配置plugins：
|
1 |
new extractTextPlugin("/css/index.css") |
配置modules：
|
1 2 3 4 5 6 7 8 9 |
rules: [ { test: /\.css$/, use: extractTextPlugin.extract({ fallback: "style-loader", use: "css-loader" }) } ] |
路径处理
在处理前，我们在webpack.config.js 上方声明一个对象，叫website。
|
1 2 3 |
var website ={ publicPath:"http://192.168.1.108:1717/" } |
然后在output选项中引用这个对象的publicPath属性。
|
1 2 3 |
output:{ publicPath:website.publicPath } |
9、js文件的转换处理，将es6的转为浏览器支持的es5语法，这里需同时安装多个依赖，我们一次性全部安装
npm install –save-dev babel-core babel-loader babel-preset-env babel-preset-react
在项目根目录新建.babelrc文件，并把配置写到文件里。
.babelrc
|
1 2 3 |
{ "presets":["react","env"] } |
在webpack.config.js里添加loader配置
|
1 2 3 4 5 6 7 |
{ test:/\.(jsx|js)$/, use:{ loader:'babel-loader', }, exclude:/node_modules/ } |
10、js文件的压缩处理
在webpack.config.js中引入uglifyjs-webpack-glugin插件
|
1 |
const uglify = require('uglifyjs-webpack-plugin'); |
引入后在plugins配置里new一个 uglify对象就可以了
|
1 2 3 |
plugins:[ new uglify() ], |
11、关于代码调试
在使用webpack时只要通过简单的devtool配置，webapck就会自动给我们生产source maps 文件，map文件是一种对应编译文件和源文件的方法，让我们调试起来更简单。
使用方法：
在webpack.config.js中的exports添加devtool: ‘eval-source-map’,如
|
1 2 3 4 5 6 7 8 |
module.exports = { devtool: 'eval-source-map', entry: __dirname + "/app/main.js", output: { path: __dirname + "/public", filename: "bundle.js" } } |
四种选项
在配置devtool时，webpack给我们提供了四种选项。
source-map:
在一个单独文件中产生一个完整且功能完全的文件。这个文件具有最好的source map,但是它会减慢打包速度；
cheap-module-source-map:
在一个单独的文件中产生一个不带列映射的map，不带列映射提高了打包速度，
但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号）,会对调试造成不便。
eval-source-map:
使用eval打包源文件模块，在同一个文件中生产干净的完整版的sourcemap，
但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定要不开启这个选项。
cheap-module-eval-source-map:
这是在打包文件时最快的生产source map的方法，生产的 Source map 会和打包后的JavaScript文件同行显示，
没有影射列，和eval-source-map选项具有相似的缺点。
四种打包模式，有上到下打包速度越来越快，不过同时也具有越来越多的负面作用，较快的打包速度的后果就是对执行和调试有一定的影响。
个人意见是，如果大型项目可以使用source-map，如果是中小型项目使用eval-source-map就完全可以应对，需要强调说明的是，source map只适用于开发阶段，上线前记得修改这些调试设置。
12、第三方插件引入
第一种
npm install jquery
安装完成后，你会发现在package.json中并不存在这个包的依赖。如果你项目拷贝给别人继续开发，或者别人和你git合作，
再次下载项目npm install时就会缺少这个jquery包。项目就会无法正常运行，所以这也是我们最不赞成的安装方法。
第二种：
npm install jquery –save
安装完成后，它存在于package.json的dependencies中，也就是说它是生产环境需要依赖的包（上线时需要的以来包）。
第三种：
npm install jquery –save-dev
安装完成后，它存在于package.json的devDependencies中，也就是说它是开发环境中需要的，上线并不需要这个包的依赖。
安装全部项目依赖包：
npm install
安装生产环境依赖包：
npm install –production
这里我们演示jquery的安装和使用
下载jquery
npm install –save jquery
(1)=========单个文件需要用到某个库，使用局部引入的方式，如entry.js中使用jquery
修改entry.js文件
安装好后，还需要引入到我们的entry.js中，这里直接使用import进行引入就可以。
|
1 |
import $ from 'jquery'; |
引入好后我们就可以在entry.js里使用jquery，我们可以加入下面的代码，然后进行测试。
|
1 |
$('#title').html('如果你能看到我，说明jquery生效'); |
在我们的页面中，看不到jquery文件的引入，因为被打包到了entry.js中
(2)=========全局引入，在任何地方都可以使用，需用到webpack的ProvidePlugin插件
先再webpack.config.js中引入webpack。
|
1 |
const webpack = require('webpack'); |
引入成功后配置我们的plugins模块，代码如下。
|
1 2 3 4 5 |
plugins:[ new webpack.ProvidePlugin({ $:"jquery" }) ], |
然后在需要使用jquery的地方直接使用即可
//测试全局的jquery是否引用成功，在你的某个js文件中写入如下代码
|
1 |
console.log($); |
13、配置文件的模块化实现
先看一下Javascript的模块化
|
1 2 3 4 5 |
exmodule.js function exmodule(){ alert('我是导出模块输出的内容'); } module.exports=exmodule; |
immodule.js
|
1 2 |
import exmodule from './exmodule.js'; exmodule(); |
其实webpack的模块化和Javascript的模块化很类似。
首先在根目录，新建一个webpack_config文件夹，然后新建webpack_entry.js文件，代码如下：
webpack_entry.js
|
1 2 3 4 5 6 7 8 |
//声明entry变量 const entry = { //入口文件的配置项 'entry': './src/entry.js', 'index':'./src/js/index.js' }; //进行模块化导出 module.exports = entry; |
配置的模块化代码编写好以后，需要在webpack.config.js中引入，注意这里的引入只能使用require的方法。
|
1 |
const entry = require("./webpack_config/webpack_entry.js") |
然后在入口文件部分，修改成如下代码：
|
1 |
entry:entry, |
至此，模块化完成
发表评论