二：搭建一个webpack3.5.5项目：创建项目的webpack配置文件

时间 2019-11-18

标签搭建一个 webpack3.5.5 webpack 项目创建配置文件繁體版

原文原文链接

第一步：javascript

npm init -y 【初始文件】
npm info webpack / bower info webpack【查看版本,用bower的时候要先 npm install bower】
npm install webpack –save-dev 【下载webpack】css

第二步：html

mkdir src 【建立源文件】
mkdir dist 【建立打包后的文件】java

第三步：node

手动建立index.html文件
在index.html中引入打包后的json文件咱们设置为 bundle.js文件
mkdir script
mkdir style
在根目录中手动建立webpack.config.js文件webpack

第四步：git

配置webpack.config.js文件
手动在src/script中新建main.js文件，【随便写个函数】
entry 入口，引入main.js配置文件
outer出口，打包后的文件位置，path打包后的路径，filename打包后的文件
在命令行运行：npm run webpackgithub

webpack.config.js的配置：
web

main.js 文件里面写入你的JS：npm

index.html文件中的内容

执行npm run webpack后成功打包完后在dist/js下会自动生成bundle.js文件

若是webpack.config.js 的名字改变如改成：webpack.dev.config.js,执行的时候要用 webpack –config webpack.dev.config.js执行。通常状况用webpack.config.js

若是在webpack中加参数，咱们在package.json中配置：

webpack --config webpack.config.js：webpack命令 
--progress打包的过程 
--display-modules打包的模块 
--colors：但愿打包的字是彩色，
--display-reasons：打包的缘由
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"

打包成功后运行npm run webpack 成功后的，注意运行webpack是运行的node_modules中的webpack而npm run webpack是运行的package.json的与npm相关，全部要运行npm run webpack

webpack配置的entry和output
entry设置：

第一种状况：一个文件的状况：entry:’./src/script/main.js’,
第二种状况：多个文件：entry:[‘./src/script/a’,’./src/script/main.js’],
第二种状况下，咱们手动在src/script下新建了a.js文件[写点东西]，执行npm run webpack后就会将a与main打包到bundle.js中

第三种以对象形式传入，在多页面中使用

onst config = {
  entry: {
  pageOne: './src/pageOne/index.js',
  pageTwo: './src/pageTwo/index.js',
  pageThree: './src/pageThree/index.js'
  },
  output:{
        path:path.resolve(__dirname,'./dist/js'),
        filename:'[name].js'
    }
};
注意output中filename中改成：filename:'[name].js'

output设置

output中有不少属性，咱们经常使用的有filename、paht，
filename:当entry中有多个属性的时候 filename:’[name].js’,若是是单独的一个则直接打包到filename:’bundle.js’中
filename中的三个属性：
[name] : 表示entry做为对象时的key值
[hash]: 是打包的hash值
[chunkhash]: 每个chunk的hash值

打包后能够看到两个文件的名字变为hash值

使用[chunkhash]后能够看到两个文件的名字与上面的Hash不同了，咱们能够认为是文件的版本号或者MD5值（保证每一个文件的惟一值）

var path=require('path');
module.exports={
   entry:{
        main:'./src/script/main.js',
       a:'./src/script/a.js'
    },
    output:{
        path:path.resolve(__dirname,'./dist/js'),
        filename:'[name]-[chunkhash].js'
    }
};

若是文件改后会发现版本的值与上次不同了，因此利用这种方式能够在项目上线的时候使用或者文件更改的时候查看

运行npm run webpack后，会发现命令行中多了一个index.html文件，而在 dist中会生成打包后的index.html里面会自动生成三个script

例如：在模板的title中改变名字后，运行后在dist中的index.html下自动改变了，因此之后咱们就不用在根目录的index.html下手动增长文件了。直接执行html-webpack-plugin就能够了

更改路径：

若是咱们想如src同样把index.html放在dist文件的根目录下把其他JS文件放到JS文件夹中则output的配置如：固然在有html-webpack-plugin运行的时候

output:{
        path:path.resolve(__dirname,'./dist'),
        filename:'js/[name]-[chunkhash].js'
    },

名字更改

若是咱们想把指定的文件的名字打包成hash的名字如index-[hash].html

若是想把文件放到指定的位置如：head/body
则直接在plugins中加入inject:’head’

plugins:[
        new htmlWebpackPlugin({
            template:'index.html',
            filename:'index-[hash].html',
            inject:'head'
        })
    ]

自动化生成项目中的html页面（下）

若是想在配置中指定title则要在htmlWebpackPulgins中写入title如内容，在src的根index.html中的title中用ejs模板<%= htmlWebpackPlugin.options.title %>，以后则能够在dist文件中看到新生成的index.html文件title改变了
webpack.config.js配置：

plugins:[
       new htmlWebpackPlugin({
           template:'index.html',
           filename:'index-[hash].html',
           inject:'head',
           title:'webpack is good!'
       })
    ]

src中根index.html中 ejs模板方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%=htmlWebpackPlugin.options.title%></title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>

运行后则能够在dist中看到新生成的index.html文件的title改变为咱们设置的

设置时间同上：

在src中的根目录的index.html中设置：

<%= htmlWebpackPlugin.options.date%>

运行后，能够在dist中新生成index.html中看到时间

咱们在模板中也能够循环遍历htmlWebpackPlugin的属性与值
直接在src根目录下的index.html中写模板便可

<% for(var key in htmlWebpackPlugin.files){%>
 <%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key])%>
<%}%>

<% for(var key in htmlWebpackPlugin.options){%>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key])%>
<%}%>

运行后，能够在dist的index.html中看到生成的属性与值

能够在插件的官网查看 https://www.npmjs.com/package/html-webpack-plugin中Configuration对照每一个插件的值与属性

ejs模板引入文件：

在src根文件里用EJS模板引入
npm run webpack
在dist文件里查看 index.html能够看到引入的文件打包后的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</head>
<body>
<%= htmlWebpackPlugin.options.date%>

<script type="text/javascript" src="<%=htmlWebpackPlugin.files.chunks.a.entry%>"></script>

</body>
</html>

publicPath:占位符，也就是上线的时候的域名地址

publicPath:’https://cdn.com/’

output:{
       path:path.resolve(__dirname,'./dist'),
       filename:'js/[name]-[hash].js',
       publicPath:'https://cdn.com/'
    },

上线压缩文件

压缩上线minify属性：值有不少能够查看：https://github.com/kangax/html-minifier#options-quick-reference
removeComments:删除空格
collapseWhitespace:删除注释

plugins:[
        new htmlWebpackPlugin({
            template:'index.html',
            filename:'index.html',
            inject:false,
            title:'webpack is good',
            date:new Date(),
            minify:{
                removeComments:true,
                collapseWhitespace:true
            }
        })
    ]

npm run webpack
dist根文件中查看index.html中压缩的index.htm

多页面应用：

若是根据一个根目录下index.html模板在生成a.html/b.html/c.html三个页面
咱们能够在webpack.config.js中配置三个htmlWebpackPlugin
在src/script中手动新建a.js/b.js/c.js三个js
在entry中引入
在htmlWebpackPlugin中的filename改为a.html/b.html/c.html
title能够改为不一样的名字
若是指定引入不一样的文件则用chunks 参考https://www.npmjs.com/package/html-webpack-plugin

注意在dist/js中必须存在要引入的文件，个人里面没有main.js，可是图片上有写

npm run webpack
能够看到dist里生成了a.html/b.html/c.html三个文件
打开后能够看到里面的title和引入的文件的不一样

excludeChunks:除了哪些文件不引入：

new htmlWebpackPlugin({
           template:'index.html',
           filename:'a.html',
           inject:'body',
           title:'webpack is a!',
           excludeChunks:['b','c']
       }),

若是咱们为了达到极致，减小http请求，使用 html-webpack-inline-source-plugin
npm run webpack
则能够看到每一个新生成的页面中都插入了相应的js代码（a.html/b.html/c.html）

html-webpack-inline-source-plugin:插入代码使用方法：

npm install –save-dev html-webpack-inline-source-plugin
webpack.config.js配置命令：
一、引入插件：var HtmlWebpackInlineSourcePlugin = require(‘html-webpack-inline-source-plugin’);
二、在plugins中加入htmlWebpackInlineSourcePlugin()
new HtmlWebpackInlineSourcePlugin()
三、在htmlWebpackPlugin中加入要插入的格式
inlineSource: ‘.(js|css)$’ ：添加js 与 css格式的
或者inlineSource中添加要插入的文件名如：inlineSource:’.(main)’

npm run webpack
查看a.html/b.html/c.html中能够看到插入了main.js源码，经过excludeChunks能够插入src的js
参考资料：https://github.com/DustinJackson/html-webpack-inline-source-plugin

什么是loader以及loader的特性：

loader是用来处理资源文件，接受资源文件为一个参数，处理完后返回一个新的资源文件。
也就是利用loader告诉webpack处理的是coffeeScript,仍是JSX.

loader特性：

一、能够被串联的
二、能够是同步或异步
三、能够接受参数
四、能够直接经过正则指定后缀名
五、能够用npm安装
六、能够获取webpack配置
七、能够生成额外的文件

loader的三种方式：

require("./loader!./dir/file.txt");
第二种：
配置文件
第三种：
webpack --module-bind jade --module-bind "css=style!css"

以前是多页面应用，如今新建单页面less应用以下图：

layer.html代码

<div class="layer">
   <div>this is layer</div>
</div>

layer.less代码

.layer{
  width:600px;
  height:200px;
  background:green;

·> div{
width:400px;
height:100px;
background:red;
}
}

layer.js代码

import tpl from './layer.html'; //ES6写法
function layer(){
    return {
        name:'layer',
        tpl:tpl
    }
}
export default layer;

app.js代码

import layer from './components/layer/layer.js';
const App=function (){
    const NUM=1;
    alert(NUM);
    console.log(layer);
};
new App();

loader 配置：

https://babeljs.io/docs/setup/#installation babel官网
npm install –save-dev babel-loader babel-core

loader中babel文件：如何处理JS文件：

安装：npm install --save-dev babel-preset-latest
第一种：
module:{
loaders:[
{
 test:/\.js$/,
 loader:'babel-loader',
 query:{ //参数
        presets:['latest']
      }
}
]
}

第二种：在根目录中建立一个.babelrc配置文件
代码：
{
"presets":["es2015"]
}

第三种：直接在package.json中
{
  "name": "webpack-text",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "babel":{
    "presets":["latest"]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "webpack --config webpack.config.js --progress --display-modules --colors  --display-reasons"
 },

npm run webpack
出现错误：Unexpected token….这种状况在layer.js中先把上面import tpl from’./layer.html’ 去掉
查看dist中main.bundle.js能够查看生成的文件
查看dist中index.html中也引入了main.bundle.js文件

exclude:loader的排查范围，include:loader的包含范围：

能够优化文件，时间减小

处理项目中的css

npm install style-loader css-loader –save-dev
手动建立common.css文件

在app.js中引入css模块
import ‘./css/common.css’;

postcss-loader:

npm i -D postcss-loader ：样式处理器
npm install autoprefixer –save-dev :是 postcss的插件，自动加载样式前缀
css-loader?importLoaders:1 ：是flex样式文件利用@import引入到另外一个样式表中

效果：可是在3.5版的webpack中，autoprefixer却不能用了，若是有更好的方法，请你们分享

使用less和sass：

使用less须要安装：npm i less-loader –save-dev
若是电脑上没有less还须要安装:
npm install less –save-dev

webpack.config.js命令配置

{
              test:/\.less$/,
               use:[
                   'style-loader',
                   'css-loader',
                   'postcss-loader',
                   'less-loader'
               ]
            }

处理模板文件

npm i -D html-loader [安装html模板，3.5版本安装方式]
layer.html模板，做为一个字符串进行处理
layer.js中引入layer.html模板
在app.js中引入layer.js；首先获取app节点，而后dom.innerhtml=layer.tpl;

layer.html的模板：

app.js:

注意：import Layer 与App中new Layer一致

webpack运行
查看dist中index.html 能够看到效果

ejs模板方法：

将layer.html改成layer.ejs或者直接改成layer.tpl，以及更改模板内容
npm install ejs-loader –save-dev
注意layer.js中引入的是layer.tpl
此时app.js中的tpl就是一个函数

webpack 运行
查看index.html效果：会看到已经将数组插入了

处理图片及其余文件

处理图片文件的几种状况：
一、css文件里有不少背景文件
二、模板结构里会直接引用某一个标签
三、根部html里的图片文件

一、css里的背景图片

npm install file-loader –save-dev ：使用的loader加载器

layer.less文件里添加background背景图片

 div{
width:400px;
height:100px;
background:url('../../assets/1.png');
}

二、根index.html中的图片处理

上面已经加载了file-loader，因此咱们在html中直接写图片运行便可

三、模板文件中的图片处理

在layer.tpl模板中，若是要用相对路径须要这样写：${require（）} 不然会报错

若是要改变图片的输出地址

加入query 输出地址是在assets文件内的5位的hash值，
参考资料：https://github.com/webpack/file-loader

{
                test:/\.(png|jpg|gif|svg)/,
               loader:'file-loader',
                query:{
                    name:'assets/[name]-[hash:5].[ext]'
               }
            }

npm install –save-dev url-loader
url-loader相似file-loader，可是它能够指定一个参数（limit）意思是：若是这个图片或者文件大于设定的limit的大小的时候就会丢给file-loader处理，若是小于就会设定一个编码

webpack 运行后，在dist/index.html中能够看到

这种状况说明文件已经被打包到main.bundle.js和index.html中了
经过这种方式，咱们能够对图片进行分类，经过大小的设定看打包到哪里

bace64与htpp请求的优点略势：

经过http请求载入过来的图片，可使浏览器享受到缓存，图片重复性很高的时候用http请求会利用缓存请求
若是是经过bace64载入的图片，至关于只要在任何地方应用这个图片的时候，都会引用一个一样大小的bace64编码存在这个地方，从某种程度上来讲，会致使代码的冗余与体积，

image-webpack-loader:图片压缩：

npm install image-webpack-loader –save-dev