[js高手之路]深入浅出webpack教程系列2-配置文件

2019-10-22 作者:金沙澳门官网网址   |   浏览(90)

[js高手之路][js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)。浅显webpack教程体系索引目录:

  • [js高手之路]通俗webpack教程体系1-安装与大旨打包用法和下令参数
  • [js高手之路][js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)。[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)。深入显出webpack教程种类2-配置文件webpack.config.js详解(上)
  • [js高手之路]开头webpack教程连串3-配置文件webpack.config.js详解(下)
  • [js高手之路]浅显webpack教程连串4-插件使用之html-webpack-plugin配置(上)
  • [[js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)。js高手之路]通俗webpack教程种类5-插件使用之html-webpack-plugin配置(中)
  • [js高手之路][js高手之路]深入浅出webpack教程系列2-配置文件webpack.config.js详解(上)。通俗webpack教程种类6-插件使用之html-webpack-plugin配置(下)
  • [js高手之路]深入显出webpack教程体系7-( babel-loader,css-loader,style-loader)的用法
  • [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(输出路径) loaders(加载loader), and plugins(插件使用),官方网址有详细布置表明:. 那么哪些是entry(入口)呢,就是项目运转时,第三个要被实践的文件,叫入口文件

图片 2

webpack.config.js 文件:

1 console.log( __dirname ); //D:ghostWubakwebpackdemo2
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

 

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:[js高手之路]深入浅出webpack教程系列2-配置文件

关键词: