3项目脚手架搭建npm， webpack-cli及webpack

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的初始化

1. npm init 设置各种文件配置
2. sudo npm install webpack -g 全局的webpack安装
3. 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

1. 直接在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' );》打包