Webpack使用

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将模块按照指定的规则生成对应的静态资源。

　　一 .  打包JS文件：

　　新建文件目录包含：

　　　　

　　　　

<!DOCTYPE html>
<html>
    <header>
        <meta charset="utf-8">
        <title>WEBPACK</title>
    </header>
    <body>
        <div id="d1"></div>
    </body>
    <script src="./bundle.js"></script>
</html>

 

var d1 = document.getElementById('d1');
d1.innerText = "测试文字"

 

    1. 初始文件  cnpm init   生成  page.json  文件 ；
    2. 安装 webpack :   cnpm install webapck -d；
    3. 执行打包命令 webpack src/min.js bundle.js；                                                           
    4.  多个js文件打包，  新建  02.js 文件，在min.js 中引入该文件，执行打包 命令； 
      require('./02.js');
var d1 = document.getElementById('d1');
d1.innerText = "测试文字";

    5. 新建 webpack 配置文件（webpack.config.js）； 
      var path = require('path');
module.exports = {
    entry: './src/min.js',                      //入口文件（必须是绝对路径）
    output : {
        path: path.resolve(__dirname, './'),    //打包文件路径（必须是绝对路径）
        filename: 'bundle.js',                  //生成文件名字  
    }
}

      新建配置文件后，打包文件直接使用命令 webpack 即可 （  ） ；

    6. 其他命令：
      1. webpack --config      　　//另一份配置文件
      2. webpack -display-error-details 　//显示异常信息
      3. webpack -w 　  //监听变动并自动打包 
      4. webpack -d 　　//生成map映射文件，告知哪些模块被最终打包到哪里了
      5. webpack -p 　　//压缩混淆脚本，这个非常非常重要！

　　二.  Loader

　　webpack本身只能处理JS文件，如果想要处理其他文件。就需要使用 loader 进行转换。

　　css 文件打包时需要安装  css-loader  和 style-loader （ cnpm install css-loader style-loader ）。然后，在min.js中引入css文件。需要注意的是，在require的时候要标注需要的loader。

require('./css.css');

　　在webpack.config.js 文件中，增加  module ;

var path = require('path');
module.exports = {
    entry: './src/min.js',                      //入口文件（必须是绝对路径）
    output : {
        path: path.resolve(__dirname, './'),    //打包文件路径（必须是绝对路径）
        filename: 'bundle.js',                  //生成文件名字   
    },
    module:{
        loaders:[
            {test:/\.css$/,loader:'style-loader!css-loader'}
        ]
    }
}

　　

 

　　三.配置本地服务

　　1.安装   cnpm install webpack-dev-server --save-dev

　　2.在webpack.config.js中配置　devServer

var path = require('path');
module.exports = {
    entry: './src/min.js',                      //入口文件（必须是绝对路径）
    output : {
        path: path.resolve(__dirname, './dist'),    //打包文件路径（必须是绝对路径）
        filename: 'bundle.js',                  //生成文件名字   
    },
    module:{
        loaders:[
            {test:/\.css$/,loader:'style-loader!css-loader'}
        ]
    },
    devServer:{
        contentBase: "./",          //本地服务器在那个页面搭建
        historyApiFallback:true,    //任意的跳转或404响应可以指向 index.html 页面；不跳转
        inline:true,                //实时刷新
        // hot:true，
        port:9000
    }
}

　　在page,json的scripts中增加启动本地服务设置：执行命令  cnpm run dev 启动本地服务。

"scripts": {
      "dev":"webpack-dev-server --inline",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

　　3.代码热更新

　　本地服务如果想要实现，代码热更新需要使用两个插件：

　　a. "html-webpack-plugin"     安装    cnpm install html-webpack-plugin --save-dev

　　这个插件将为您生成一个HTML5文件，该文件的 body 中使用script 标记引用了所有 webpack bundle。 安装后需要在webpack.config.js 中配置 plugins  ：

　　b. “HotModuleReplacementPlugin”   启用 HMR 热替换模块

plugins: [
        new HtmlWebpackPlugin({                             //
            template: './index.html'
        }),
        new webpack.HotModuleReplacementPlugin()            //热更新
    ],

 代码下载：https://github.com/sunyouheng666/webpack

posted @ 2018-04-01 16:04  $坐看云起$  阅读(118)  评论(0)  编辑  收藏  举报