webpack基础学习

前端资源加载/打包工具，根据依赖关系进行静态分析，并依据规则生成对应的静态资源。

安装

• 安装Webpack前,本地环境需要已经安装node.js
• (也可用淘宝镜像)全局安装webpack

npm install webpack -g

！！还要再项目中安装一次！！

npm install webpack --save-dev

打包使用

• 单个文件 webpack show.js bundle.js 将前者打包成后者

  
  image.png
• 多个相互依赖文件打包

暴露: module.exports= 可以暴露数据和方法等。
接受: require('') 同级文件地址 ./

str.js文件中暴露

image.png

show.js文件中接收

image.png

样式打包

• 初始化项目

npm install

得到package.json文件

• 然后安装loader加载器，将样式文件一同打包到bundle.js文件中

npm intstall css-loader style-loader

得到node_modules

• 向show.js中加入以下代码，载入名为style.css样式文件，再通过webpack show.js bundle.js 一起打包js和css

require("!style-loader!css-loader!./style.css");

webpack.config.js配置文件

• 在手动编译时，可以将一些经常性的操作添加到配置文件，减少编译过程中手写代码的数量，构造自动工具。

• 先向项目中添加配置文件，新建一个js文件，名为webpack.config.js。
  整理目录如下：

  
  image.png
• 编写webpack.config.js文件：

module.exports={
    entry:'./src/js/show.js',   //输入文件
    output:{
        path:__dirname+'/dist', 
        filename:'bundle.js'    //当前目录下得dist文件夹下得bundle.js为输出文件
    },
    module:{
        loaders:[               //加载器
            {
                test:/\.css$/,  //正则匹配所有后缀名为.css的文件
                loader:'style-loader!css-loader'
            }
        ]
    }
}

• show.js中载入名为style.css样式文件的代码可以省去前面的加载器

require("!style-loader!css-loader!./style.css");

改为： 即show.js上层的js文件的同级css下得style.css文件。

require("../css/style.css");

此后修改了style.css文件后，不用再写webpack show.js bundle.js打包
直接命令行webpack打包：

image.png

安装第三方库（例子jQuery）

• 先安装jq

npm install jquery --save-dev

• 在show.js中导入 jq

var $ = require('jquery');

image.png

写完后，直接命令行webpack打包。

服务端环境安装

通过安装webpack-dev-sever模块将项目打包到服务端，并指定端口，同时还可以配置启动命令。

• 在package.json中可以设置启动项

  
  image.png
  

  以后编译的时候就不用命令webpack了，改为

npm run build

• 安装

npm install webpack-dev-server --save-dev

• 发布到服务器：
  先在package.json中添加命令：

  
  image.png
  

  然后编译：npm run build
  最后发布：npm start
  如下为成功状态：

  
  image.png

发布到服务器端后如何能够同步修改

• 监测build（在webpack.json中）:

  
  image.png
  

  打开两个终端：一个打包，一个运行npm start 即可

• 更改端口号（在webpack.config.js中）

  
  image.png