码迷,mamicode.com
首页 > Web开发 > 详细

webpack初识(biaoyansu)

时间:2018-04-18 15:16:09      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:需要   产生   index   nbsp   web   file   output   try   dirname   

1.是什么和为什么

 

在浏览器中的js之间如果需要相互依赖

src=a.js

src=b.js

src=c.js

src=d.js

需要暴露出全局变量,而暴露出的这个全局变量是非常不安全的,

随着Node与NPM的产生,

如今的前端发展方向是全部使用js来写页面,如果使用规范比如import(es6规范)或者require(commonjs规范)

只要有入口文件,可以通过webpack来把这些a,b,c,d互相依赖的js打包成一个整体的bundle.js

技术分享图片

 

 

2.安装

npm install webpack -g //全局安装 但是不推荐

npm instal webpack --save-dev (npm install webpack -D)

 

3.entry和output

入口文件和出口文件的配置 在根目录下建立webpack.config.js 然后进行配置

 

4.loader

 

module.exports = {
entry: ‘./js/index‘,
output:{
filename:‘bundle.js‘,
path:__dirname + ‘/dist‘
},
module:{
rules:[
{
test: /\.css$/,
use:[‘style-loader‘,‘css-loader‘] //右边往左边加载
}
]

}
}

 

 

 

Core concepts:

  • Entry
  • Output
  • Loaders
  • Plugins

 

https://webpack.js.org/concepts/

webpack初识(biaoyansu)

标签:需要   产生   index   nbsp   web   file   output   try   dirname   

原文地址:https://www.cnblogs.com/eret9616/p/8874713.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!