webpack

Webpack的作用：
模块打包机：把多种类型文件打成一种类型的文件
把模块转成静态文件
优化 提高性能


安装webpack
windos+R打开cmd输入以下文件
 f:
mkdir webpack_demo 
cd webpack_demo
node -v(如果有版本说明node已安装，如果没有需要先安装node)
npm install -g webpack
webpack -v(查看webpack版本/查看webpack是否安装成功)
npm init   (本地安装webpack需要package.json的文件)

npm install --save-dev webpack (将本地安装保存到package.json文件里

如果安装不成功出现红字应该查看（1、node版本是不是过低（至少6以上）2、网络问题，（百度淘宝镜像安装cnpm：npm.taobao.org,然后用“使用说明”下的命令复制到命令行就开始安装cnpm（cnpm install webpack -g）。3、mac/unix权限:sudo     如果是Windows使用管理员运行)

npm install --save webpack   (保存到生产环境)


webpack更新到最新版
方法一：
1、删除node_modules 
2、重新安装webpack：npm install --save-dev webpack
如果webpack里存在很多项目，方法二：
1、将package.json里面的“webpack”：“webbpack安装后的高版本”
2、删除node_modules 
3、重新安装webpack：npm install --save-dev webpack


建立项目结构
src（开发环境）
dist（生产环境：测试完成后提交给项目组长）
ctrl+~  打开终端，自动定位到当前项目的文件夹
webpack src/entery.js dist/bundle.js
npm install live-server
live-server(自动打开浏览器)


入口和出口webpack.config.js

const path=require('path');
webpack配置文件
module.export={
entry;{
entry：'./src/entry.js',


},  //入口文件（单一/多入口）的配置项
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'


},  //出口文件的配置项
module:{}    //模块：解读css,压缩、转换图片
plugins:[],  //插件

热更新：

devServer:{

contentBase:path.resolve(__dirname,'dist'),

host:'loaclhost',

port:1111,

compress:true

}  //配置webpack开发服务功能

'script':{

'server':'webpack-dev-server'

}//package.json的script中加入

npm install webpack-dev-server --save-dev //安装webpack-dev-server

npm reun server  //运行

打包css

1安装style-loader：cnpm install style-loader --save-dev    //style-loader的作用，把css中的url挂在到js

2安装css-loader:cnpm install css-oader --save-dev    //css-loader的作用：把css中的标签（例如：class）挂载到js

3npm run server  //运行服务

4在src的css下的index.css内添加内容

body{

background-color: red;

color: white;

}

5在对应的js内引入css:

import css from './css/index.css';

6在webpack.config.js中module下找到css并添加loader

module:{

rules:[

{

test: /\.css $ /, //找到css文件

use:[ 'style-loader', 'css-loader'],//use:[{style-loader},{css-loader}]

}

]

},

压缩JS代码：

加一个插件

1

const uglify= require( 'uglifyjs-webpack-plugin');

2

plugins:[

new uglify()

],

3webpack