第一个打包的文件
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插件那了。
</div>