1.所有需要使用NPM 的项目都需要使用npm init进行初始化
webpack.github.io/docs/configuration.html
使用npm install进行安装的话,会在根目录下产生一个node_modules的文件夹,
所有你npm 的包都会放置于此
-g全局安装
--registry= 指向安装,可以把安装引导到国内环境的安装
2.webpack模块化文件
安装 npm install webpack@1.15.0 --save-dev可以初始化项目中的安装
版本
2.操作
cnpm install webpack@1.15.0 --save-dev
webpack在使用包的时候先使用本地的包,没有的时候才选择使用全局的安装包
webpack使用1.15.0而不使用2.0是因为其中有default的关键字和ie8以下的浏览器有冲突导致出现错误。
--save-dev可以把项目的配置记录在package.json中-包括版本
3.webpack.config.js
3.loader
4.常用命令工具
webpack 常用于调试代码用
wepack -p只用于做线上打包时,会把所有文件都做最小话压缩
webpack --watch 用作监听文件的改变,和自动编译,一般用于开发过程
webpack --config webpack.config.js 改变默认的配置文件位置
删除 rm -r -f node_modules
5.webpack-dev-server
作用:前端开发的服务器
webpack --watch不能刷新浏览器基本不用
3-4npm和webpack的初始化
- npm init 设置各种文件配置
- sudo npm install webpack -g 全局的webpack安装
-
npm install webpack@1.15.0 --save-dev 项目目录安装webpack
查看版本webpack -v 是否安装成功
某些情况无法查看的情况需要 npm install webpack-cli -g
4.文件的建立
app.js
cats = require( './cats.js' );
console . log ( cats );
cats.js
var cats = [ 'dave' , 'henry' , 'martha' ];
module . exports = cats ;
5.打包文件的建立
注意webpack的版本可能会导致打包失败,而版本的额设置需要同步的在package.json中设置好,
然后npm init,再重新安装webpack
webpack ./src/page/index/index.js ./dist/app.js
把index.js打包进app.js中去
较为麻烦
直接把打包文件设置好进行
webpack.config.js
const path = require( 'path' );
module . exports = {
entry : './src/page/index/index.js' ,
output : {
path : path . resolve (__dirname, './dist' ),
filename : 'app.bundle.js'
}
};
webpack -p进行打包
6.webpack对脚本的处理
1)jquery的使用
npm install jquery --save
然后在index中设置好
以上安装方法无法在全局中使用
卸载后重新安装,某些情况下无法供全局使用 npm uninstall jquery --save
- 直接在index.html中引入,就成了全局的jq了
然后在index.js设置
删除掉jqury npm uninstall jquery --save
2.js多入口的问题 entry
module. exports = {
entry : {
'index' :[ './src/page/index/index.js' ],
'login' :[ './src/page/login/index.js' ],
},
output : {
path : path . resolve (__dirname, './dist' ),
filename : 'js/[name].js'
}
};
3.模块化引入jQuery
index.js
var $$ = require( 'jquery' );
$$ ( 'body' ).html( "HELLO JQ*****" );
webpack.config.js
externals:{
'jquery':'window.$'
}
此处注意一下两个文件的先后顺序
4.使用CommonsChunkPlugin提取公共代码
特别注意webpack 4已经更改了该插件的支持
关于版本的问题
***1.安装 在全局下安装:npm install webpack -g
安装指定版本:npm install web
pack@<version> -g 例如:npm install webpack@3.4.1 -g
如果只是用来练习全局安装就可以了,一开始装了个4.8.3版本的,node也是最新的npm也好着,一做项目就出现错误,4.*.*版本以上还需要安装另外一个东西,具体的可去webpack官网看。
最后只能把webpack删除,重新装了一个指定版本的,才没有什么问题了。
***2.删除 在全局下删除 npm uninstall webpack -g
最好将项目目录下的node-modules一起删除,否则会有残留文件影响下一次的结果。
特别注意在安装全局的webpack和项目的webpack时注意版本的一致性3.6.0
webpack-cli的版本不能比webpack的版本高,不然会出现问题
5.将不同的公共代码打进同一个文件中
webpack.config.js打包入口文件
./src/page/common/index.js'和 'index' :[ './src/page/index/index.js' ],打包进base.js文件中、
entry : {
'common' :[ './src/page/common/index.js' ],
'index' :[ './src/page/index/index.js' ],
'login' :[ './src/page/login/index.js' ]
},
脚本
plugins : [
new webpack .optimize.CommonsChunkPlugin({
name : "common" ,
filename : "js/base.js"
})
]
原理-先定义一个公共的module.js》common/index.js 引入 require( '../module.js' );》打包