[js高手之路]深入显出webpack教程体系索引目录:

  • [js高手之路]通俗webpack教程类别1-安装与主导打包用法和指令参数
  • [js高手之路]通俗webpack教程类别2-配置文件webpack.config.js安详严整(上卡塔尔
  • [js高手之路]早先webpack教程连串3-配置文件webpack.config.js详整(下卡塔尔(قطر‎
  • [js高手之路]浅显webpack教程系列4-插件使用之html-webpack-plugin配置(上卡塔尔国
  • [js高手之路]通俗webpack教程体系5-插件使用之html-webpack-plugin配置(中卡塔尔
  • [js高手之路]通俗webpack教程类别6-插件使用之html-webpack-plugin配置(下卡塔尔(قطر‎
  • [js高手之路]深入显出webpack教程种类7-(
    babel-loader,css-loader,style-loader卡塔尔(英语:State of Qatar)的用法
  • [js高手之路]初叶webpack教程种类8-(postcss-loader,autoprefixer,html-loader,less-loader,ejs-loader卡塔尔(قطر‎用法
  • [js高手之路]开端webpack教程种类9-打包图片(file-loader卡塔尔(قطر‎用法

接着上文,重新在webpack文件夹上面新建二个种类文件夹demo2,然后用npm
init –yes开头化项目标package.json配置文件,然后安装webpack( npm install
webpack@3.5.6 –save-dev
卡塔尔(قطر‎,然后创立基本的花色文件夹结构,好了,大家的又三个为主项目构作育搭建好了.

图片 1

率先、开端通过webpack.config.js文件配置大家的webpack项目

第生龙活虎在品种文件夹demo2下边,新建四个webpack.config.js文件,这么些webpack.config.js文件能够简化命令行操作,主要构造webpack的四大骨干:entry(项目入口卡塔尔,
output(输出路线卡塔尔(英语:State of Qatar) loaders(加载loader卡塔尔(قطر‎, and
plugins(插件使用卡塔尔国,官方网址有详尽布署表达:.
那么什么样是entry(入口卡塔尔(قطر‎呢,正是连串运转时,第一个要被实施的文书,叫入口文件

图片 2

webpack.config.js 文件:

1 console.log( __dirname ); //D:\ghostWu\bak\webpack\demo2
2 module.exports = {
3     entry : './src/js/main.js', // 入口文件
4     output : {
5         //__dirname,就是当前webpack.config.js文件所在的绝对路径
6         path : __dirname + '/dist', //输出路径,要用绝对路径
7         filename : 'index.bundle.js' //打包之后输出的文件名
8     }
9 };

 

布置文件写好现在,施行webpack打包命令,就能够去当前目录下搜寻webpack.config.js文件,把main.js文件
打包到dist/index.bundle.js,纵然main.js输入以下代码,再进行webpack打包叁次

1 function say(){
2     alert( 'ghostwu告诉你怎么学习webpack' );
3 }
4 say();

接下来在index.html文件通过<script
src=”./dist/index.bundle.js”></script>引进打包后的文本,那么就能够弹出say函数中的内容

第二、假若布置文件webpack.config.js被修改成其他名字(如webpack.dev.config.js卡塔尔(قطر‎,推行webpack打包命令,是不可能健康打包的(命令行会提醒,找不到布署文件卡塔尔,所以须要在包装的时候,通过–config钦点安插文件的名字(webpack –config
webpack.dev.config.js)技巧平日打包

图片 3

 

其三、通过package.json文件的script部分,简化打包操作

把package.json文件的scripts部分纠正成:

“scripts”: {

“d” : “webpack –config webpack.dev.config.js –progress
–display-modules –colors –display-reasons”

},

d前面包车型客车吩咐假设看不懂,请移步这里

 然后在命令行下用 npm run
d 那么些火速方式就足以实行scripts增添的”d”项对应的通令

 图片 4

 

相关文章