webpack教程-成都快上网科技有限公司
快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220
网站建设知识
十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决
webpack教程
Webpack在生产环境中有一个重要的作用就是减少http的请求数，就是把多个文件打包到一个js里，这样请求数就可以减少好多
创新互联服务项目包括濮阳县网站建设、濮阳县网站制作 、濮阳县网页制作以及濮阳县网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，濮阳县网站推广 取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到濮阳县省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！
一、安装
1、先装好node和npm，因为webpack是一个基于node的项目。然后npm install -g webpack webpack-cli 全局安装webpack webpack-cli
2、新建项目文件夹，比如webpack_demo，然后新建一个package.json的文件在项目根目录下
npm install webpack webpack-cli --save-dev npm i webpack webpack-cli--D //这行命令中， i 是 install 的缩写。 --D 是 --save-dev 的缩写。
需要补充的是，刚才输入的 --save-dev 的含义是：
至此，webpack安装完成
3、在项目根目录下，建立
src源代码文件夹——开发环境 dist生产环境文件夹(里面的文件都是webpack自动生成的) ./当前目录 ../父级目录 /根目录 项目目录：
Document
./src/index.js：
import {name} from './init';//引入 init.js 存于 name ， (js后缀可以省略)
alert(name);./src/init.js：
var name = "newApp";
export {//ECMAScript 6 语法 ， 向外暴露接口供其他文件调用时使用
name//将变量 name 指定为向外暴露成员
};4、执行打包（直接打包，没有配置文件的情况下），上面多个文件文件执行打包：webpack
5、在package.json里面配置
"scripts": {
npm run dev (开发环境输出的demo.js没有压缩)，是平时我们写代码的形式 npm run build (生产模式输出的demo.js压缩过) 不管有没有使用index.js，都会打包该文件放到main.js里面，这是没有配置文件的情况下，默认入口文件是index.js，如果没有创建index.js，那么打包就会报错
我们先创建src文件，还有一个dist文件，存放默认的打包生成的文件，然后在src里再创建index.js文件
6、总结：
打包单个文件，直接是webpack demo.js -o demo.bundle.js --mode development 在终端（命令行）中使用webpack打包，打包哪个文件就写上其名字，后面跟上输出的名字，可以给与路径 如果是打包多个文件，且彼此之间有依赖关系，就使用配置文件来进行打包 webpack默认打包src文件夹下的index.js文件，如果没有对应文件和文件夹，就需要手动创建 通过配置文件可以修改打包文件入口和输出文件路径 7、webpack的一些相关命令
注意: 这个命令只是单纯监听了默认的打包路径,也就是能监听到src下index.js的变化,也能够随将变化时进行保存刷新后其自动打包,但是,并不能监听到demo.js. 还有就是你的执行这个命令的时候,它必需属于一直监听的状态, 如果被停止了,那监听状态也停止.
二、下面介绍使用配置文件进行打包
1、创建webpack.config.js
举例：
const path = require('path');
module.exports = {
entry: './src/index.js', //入口文件的配置项
output: { //出口文件的配置项
path: path.resolve(__dirname, 'dist'), //dist目录所在的绝对路径
filename: 'main.js'
},
module: {//配置 loader 模块：例如解读CSS,图片如何转换，压缩
rules: [//相关规则写在这里
{
test: /\.css$/,//正则表达式：根据后缀为 .css 的文件来匹配 css 文件
use: [//匹配搭配 css 文件后，打包时使用以下 loader 来处理文件
{ loader: 'style-loader' },//loader 名称
{
loader: 'css-loader',//loader 名称
options: {
modules: true
}
}
]
}
]
},
plugins:[], //插件，用于生产模版和各项功能
mode: 'development' //打包模式，默认生产者模式,
devServer:{} //配置webpack开发服务功能
};2、在当前目录下（package.json所在文件夹）执行：npx webpack，即可自动执行打包
3、各种参数说明：
entry：配置入口文件的地址，可以是单一入口，也可以是多入口。（html文件引入唯一的js 文件） output：配置出口文件的地址，在webpack2.X版本后，支持多出口配置。 module：配置模块，主要是解析CSS和图片转换压缩等功能。 plugins：配置插件，根据你的需要配置不同功能的插件。 devServer：配置开发服务功能，后期我们会详细讲解。 [name]的意思是根据入口文件的名称，打包成相同的名称，有几个入口文件，就可以打包出几个文件 path ：入口文件最终要输出到哪里， filename：输出文件的名称 publicPath：公共资源路径 webpack：普通打包 webpack -p：压缩打包 webpack -p -w：监听所有需要打包的代码，只要有代码被改动并保存后，就会自动进行打包 4、如果入口文件有多个，如果output只定义一个出口文件，那么所有的入口文件都会被打包到这一个出口文件；如果想各自生成自己对应的出口文件，那么就得重新配置出口文件，如：
const path = require('path');
module.exports = {
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js'
},
output: { //出口文件的配置项
path: path.resolve(__dirname, 'dist'), //dist目录所在的绝对路径
filename: '[name]-[hash]-[chunkhash].js' //[name]：名字和入口文件一样 【hash】：随机生成的本次打包的hash值 [chunkhash]：要打包文件的版本号，除非文件修改了，否则都是不变的
}
};5、打包过后的文件名是变化的，那么在index.html中引入该文件，难道每次都需要修改路径名称吗，可以使用插件来自动生成：npm install html-webpack-plugin --save-dev
在webpack.config.js中
var htmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');
module.exports = {
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js'
},
output: { //出口文件的配置项
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name]-[hash]-[chunkhash].js' ,
publicPath:'static' //当项目需要上线时，加上这个，那么打包后生成的js文件，前面都会加上static，如：
},
plugins:[
new htmlWebpackPlugin({
template:'index.html', //以根目录下面的index.html为模板文件进行更新
filename:'index-[hash].index', //生成的html文件的名称包含hash值，自定义生成的html文件名，这样每次都会生成一个不同hash的 index文件，不建议这样使用，直接是index.html就好，默认就是index.html，可以不用设置
inject:'head', //打包后的js文件放置于头部，即上面
title:'webpack is good', //设置html的title，在模板文件使用：<%= htmlWebpackPlugin.options.title %> 获取到
minify:{ //上线前压缩index.html文件
removeComments:true, //删除注释
collapseWhitespace:true //删除空格
}
})
]
};这样，就在输出路径dist下，生成了index.html(以根目录下的index为模板)，并且也把打包后的js文件引入进去了，全自动，在filename后面加上js/，这样就使得js文件都打包到dist/js目录下，而html文件是直接打包到dist目录下
6、loader，和plugin不同，是专门用来处理资源文件，如转es6，less、图片压缩、图片转base64等的处理
★转es6
然后再package.json里面配置：
在webpack.config.js里面配置
let htmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
mode: "production",
entry: './src/index.js', //入口文件的配置项
output: { //出口文件的配置项 ，输出路径为dist目录，即所有文件都要打包到该目录下
path: path.resolve(__dirname, './dist'),
filename: 'js/bundle.js',
},
module: {//配置 loader 模块：例如解读CSS,图片如何转换，压缩
rules: [//相关规则写在这里
{
test: /\.js$/,//正则表达式：根据后缀为 .css 的文件来匹配 css 文件
loader:'babel-loader'
}
]
},
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'index.html'
})
], //插件，用于生产模版和各项功能
mode: 'development', //打包模式，默认生产者模式,
devServer:{} //配置webpack开发服务功能
};★刚刚webpack打包提示错误：
★打包css文件
module: {//配置 loader 模块：例如解读CSS,图片如何转换，压缩
rules: [//相关规则写在这里
{
test: /\.js$/,//正则表达式：根据后缀为 .js 的文件来匹配 js 文件
loader:'babel-loader'
},
{
test: /\.css$/,//正则表达式：根据后缀为 .css 的文件来匹配 css 文件
loader:'style-loader!css-loader!less-loader' //css-loader使得在js里面可以处理css文件，style-loader使得js处理完的样式插入到index.html页面中
}
]
},★遇见一系列错误，以安装npm install babel-core@7.0.0-bridge.0 --save-dev结束，成功打包了css文件
★转换less文件 npm install less-loader --save-dev
{
test:/\.less$/,
loader:'style-loader!css-loader!less-loader'
}★打包图片文件 npm install file-loader --save-dev
{
test:/\.(png|jpg|gif|svg)$/i,
loader:'file-loader' ,
query:{
name:'img/[hash].[ext]'
}
}默认是打包到dist目录下，如果要想打包到dist/img下，可以添加query，如上所示。
【注意】要查看loader的用法，可以去https://www.npmjs.com/，搜索对应的loader查看用法
★url-loader，可以处理图片和文件，当原始文件大小大于指定的值的时候，会交给file-loader处理，小于指定的值的时候，会转为base64位编码，不再是url了，而是一段编码
{
test:/\.(png|jpg|gif|svg)$/i,
loader:'url-loader' ,
query:{
limit:20000, //即20k
name:'img/[hash].[ext]'
}
}★img-webpack-loader，配合file-loader、url-loader一起使用，压缩通过http请求的图片大小
{
test:/\.(png|jpg|gif|svg)$/i,
loaders:[
'url-loader?limit=20000&name=img/[hash].[ext]',
'image-webpack-loader'
]
}三、热更新 服务器 压缩参数，是否启用服务器压缩，一般启用
四、live-server
五、案例之打包css文件
1、模块：CSS文件打包Loaders
test：用于匹配处理文件的扩展名的表达式，这个选项是必须进行配置的； use：loader名称，就是你要使用模块的名称，这个选项也必须进行配置，否则报错； include/exclude:手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）； query：为loaders提供额外的设置选项（可选）。 2、打包css文件，css文件建立好后，需要引入到入口文件中，才可以打包到，这里我们引入到entry.js中。
style-loader：用来处理css文件中的url()等
css-loader：用来将css插入到页面的style标签
两个loader都下载安装好后，我们就可以配置我们loaders了。
第一种写法：直接用use。
module:{
rules:[
test:'/\.css$/',
use:['style-loader','css-loader']
]
}
第二种写法：把use换成loader。
module:{
rules:[
test:'/\.css$/',
loader:['style-loader','css-loader']
]
}
第三种写法：用use+loader的写法：
module:{
rules:[
{
test:/\.css$/,
use:[
{
loader:'style-loader'
},
{
loader:'css-loader'
}
]
}
]
}9、插件配置：配置JS压缩
在webpack.config.js里面引入
webpack打包的时候发生错误：Error: Cannot find module 'uglifyjs-webpack-plugin'
在实际开发中，webpack配置文件是分开的，开发环境一个文件，生产环境一个文件
10、插件配置：HTML文件的发布
此时，将dist里面的index.html剪切到src目录下面，并去掉我们的JS引入代码（webpack会自动为我们引入JS），
然后配置webpack.config.js文件
再进行安装该插件
在webpack.config.js文件，添加参数
plugins:[
new htmlPlugin({
minify:{
removeAttributeQuotes:true
},
hash:true,
template:'.src/index.html'
})
]说明：
minify：是对html文件进行压缩，removeAttrubuteQuotes是却掉属性的双引号。如
里的双引号 hash：为了开发中js有缓存效果，所以加入hash，这样可以有效避免缓存JS。 template：是要打包的html模版路径和文件名称。 此时，完全不需要创建dist目录，dist目录下也不需要创建任何文件，全部webpack自动
执行完webpack之后，文件已经被打包压缩了，然后执行npm run server，即可在本地查看效果
11、图片迈坑：CSS中的图片处理
第一在src目录下新建一个images文件夹，把图片放入images文件夹
第二然后安装loader：file-loader url-loader
第三使用loader，记得在loader使用时不需要用require引入，使用plugins才需要使用require引入。
module:{
rules:[
{
test:/\.(png|jpg|gif)/,
use:[{
loader:'url-loader',
options:{
limit:5000
}
}]
}
]}
之所以只引入url-loader，是因为url-loader已经包含了file-loader的功能
test:/.(png|jpg|gif)/是匹配图片文件后缀名称。 use：是指定使用的loader和loader的配置参数。 limit：是把小于500000B的文件打成Base64的格式，写入JS。 12、图片迈坑：CSS分离与图片路径处理
12.1、把CSS从JavasScript代码中分离出来
第一安装extract-text-webpack-plugin插件
第二在配置文件里引入
第三在plugins配置文件里new一下
第四修改原来我们的style-loader和css-loader。
module:{
rules:[
{
test:/\.css$/,
use:extractTextPlugin.extract({
fallback:'style-loader',
use:'css-loader'
})
}
]
}利用extract-text-webpack-plugin插件很轻松的就把CSS文件分离了出来，但是CSS路径并不正确
var website ={
publicPath:"http://10.1.28.102:1717/"
}第二在output选项中引用这个对象的publicPath属性。
output:{
//输出的路径，用了Node语法
path:path.resolve(__dirname,'dist'),
//输出的文件名称
filename:'[name].js',
publicPath:website.publicPath
}第三使用webpack进行打包
如何把图片放到指定的文件夹下，如images下面
modules:{
rules:[
test:'\/.(png|jpg|gif)\',
options:{
limit:5000,
outputPath:'/images/'
}
]
}13、图片迈坑：处理HTML中的图片
第一安装 html-withimg-loader
npm install --save-dev html-withimg-loader
第二配置webpack.config.js
{
test:'/\.(htm|html)$/i', //注意(htm|html)加括号
use:['html-withimg-loader']
}14、给webpack增加babel支持
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude:/node_modules/
}但是不建议直接在webpack.config.js中进行配置，而是把配置写在.babelrc文件里
.babelrc //json格式 presets-渲染器
{
"presets":["react","**es2015**"]
}
.webpack.config.js里的loader配置
{
test:/\.(jsx|js)$/,
use:{
loader:'babel-loader',
},
exclude:/node_modules/ //不转node_modules里面的es6语法
}ENV：env "]
15、打包后如何调试
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}16、实战技巧：开发和生产并行设置
依赖dependencies
开发环境
生产环境 (上线环境)
npm install jquery //安装到全局环境，本项目下面是没有的，如果别人拷走了，那么拷走的文件里面是不包含jquery，可能会报错
npm install jquery --save，安装到本项目下面，并且写入dependencies
拿到别人的项目，比如从github上下载下来了一个新项目，首先需要npm install进行初始化安装
拿到别人的项目，比如从github上下载下来了一个新项目，首先需要npm install进行初始化安装，如果只安装生产环境的包，那么就是npm install --production，而不是npm install
☆☆☆☆配置生产和开发环境并行
webpack.config.js是存在于node环境中，都是用node命令运行
局部安装webpack npm install --save-dev-webpack，webpack被安装到了项目文件夹node_modules文件夹下面
http://6mz.cn/article/ighpeo.html
免费获取网站建设与品牌策划方案报价
*主要业务范围包括：高端网站建设， 集团网站建设(网站建设网站制作)找网站建设公司就上快上网。
