webpack 零基础配置

第一个打包的文件

1.打开命令行工具  进入指定目录 建立文件夹（ mkdir webpack-test）

2.进入此文件夹 初始化npm（npm init）一直按回车 

3.安装webpack(npm install webpack --save-dev)生成node_modules和pakage.json  

4.用编辑器打开当前目录并新建一个hello.js文件

5.运行webpack hello.js hello.bundle.js可以打包hello.js为hello.bundle.js

 

 

处理CSS类型 需要安装 npm installl css-loader style-loader --save-dev  然后在引用时require('style-loader!css-loader!./style.css')

css-loader：使webpack可以处理.css文件

style-loader ：把处理完的css文件新建style标签插入到html里面

不想在css的repuire()中写!style-load!css-loader!的话 可执行webpack hello.js hello.bundle.js -- module-bind 'css=style-loader!css-loader' --watch绑定loader,其中watch自动更新打包

 

 

建立基础结构目录执行基础webpack配置（webpack3）

1.打开命令行工具  进入指定目录 建立文件夹（mkdir webpack-demo）

2.进入此文件夹 初始化npm（npm init）

3.安装webpack(npm install webpack --save-dev)生成node_modules和pakage.json  

4.建立一个代码源文件目录src mkdir src

5一个放打包后的文件目录dist mkdir dist

6.webpack-demo中建一个index.html,script中引入打包后的bundle.js文件

7.src下建script  style文件夹

8.webpack-demo下创建webpack.config.js用来配置webpack，entry  output见字面意思

执行webpack就能执行图中js的打包,打包文件出现在dist/js中

如果webpack.config.js改了名字 执行webpack就不生效了 需要执行webpack --config新的config文件名

9.webpack执行时的参数配置

--progress 显示进度

--display-modules 显示打包的模块和处理文件用到的loader

--display-reasons 显示为什么打包这个模块执行用npm run webpack

 

 

进阶webpack打包配置

打包多个文件在一起，entry用数组方式，output只指定一个文件。

 

当不同的页面需要引用的文件不同，则不同页面需要打包的文件也不一样，这时可以将entry写成一个对象，output也需要随之改变，不然会被覆盖为最后一个打包的文件.

解决这个问题可以用占位符来命名filename：

[name]、[hash](相当于打包版本号)、[chunkhash](相当于文件版本号)

 

 

处理html的插件：html-webpack-plugin

动态打包后，html引用的时候就不能写死的文件名，这时需要用到webpack的插件 html-webpack-plugin，在命令行中安装：

npm install html-webpack-plugin@2 --save-dev

webpack.config.js中引入此插件

 

此时插件生成的html，与自己建立的html没有任何联系，我们需要将自建的html为模板生成有关联的dist/js/index.html:

 

 

将生成的index.js放到dist目录下,同时可以定义index的名称，以及引用打包后js的位置、设置index的title、指定变量等：

htmlWebpackPlugin有两个属性 files和options，便利出来可以看到:

用htmlWebpackPlugin对html进行压缩

 

 

 

当想通过一个模板html生产几个相应的html，且引用的js不同时，可以通过new多个htmlWebpackPlugin()在chunks中指定需要加载的js，此外，也能用excludeChunks。

 

上线时不希望script一直从publicPath的路径中发送请求，可以通过遍历把需要的js直接inline压缩到html中：

 

 

 

Loader

 

Loader用于处理资源文件，loader执行顺序从后往前。

它有三种使用方式：

1.Repuire()方法中添加，如require('style-loader!css-loader!./style.css')

2.cli命令行中设置webpack hello.js hello.bundle.js -- module-bind 'css=style-loader!css-loader' --watch

3.在webpack.config.js中进行配置

处理ES6为浏览器能识别的js代码bable-loader

先在命令行中进行安装：npm install --save-dev bable-loader babel-core

指定presets转换特性（es2016 es2017 es2015或latest）:

1.在.babelrc文件中在上{‘presets’:[‘es2015’]}

2.Package.json中加’bable’:{‘presets’:[‘latest’]},

 

给loader指定参数：

1.Repuire()的loader中?+参数

2.配置文件中用query指定参数（3以上用options）

Exclude include指定处理文件以加快处理速度

     

安装latestd的preset：npm install --save-dev babel-preset-latest

后遇到缺少 babel-loade的 报错  执行npm install babel-loader

 

 

处理css的loader

安装loader：npm install --save-dev style-loader css-loader 

npm install postcss-loader --save-dev  后处理css的loader

npm install autoprefixer --save-dev 加浏览器前缀的loader

 

如果有另一个flex.css通过在common.js中import进入，此时flex.css就不能加上浏览器前缀：

 css-loader中加上options:{importLoaders:1}指定数量import的css资源也能加上浏览器前缀：

并且在根目录加上postcss.config.js:

处理less的loader

  安装less：npm i less

  安装处理less的loader：npm i less-loader --save-dev

 

Loader处理模板文件

html模板：

安装loader： npm install html-loader --save-dev

Webpack.config.js:

 

 

 

Layer.js中的tpl是一个字符串。

 

 

Ejs模板:

安装loader：npm install ejs-loader --save-dev

 

处理图片文件loader：

安装loader：npm install file-loader --save-dev

      

 

 不管在什么位置，绝对路径都没有问题，在模板中相对路径会出现找不到这张图片，因为打包路径不会被替换。可以用${reqiure(‘../../assets/ahout.png)}

真的要吐槽一下这个编辑器  本来都有图片的一保存就全不在了，发现的时候已经走到html插件那了。