webpack 练习笔记

1， 创建项目 webpack

mkdir webpack

2, 初始化项目

npm init

3, 全局安装webpack

npm install webpack -g

4, 使用

// 创建静态文件
echo "静态html文件  引入打包后的bundle.js" >index.tml
//JS入口文件
echo "document.write('It work')" >entry.js

// 使用webpack 打包

5， 增加一个模块 module.js

entry.js 中的代码，其它模块会在运行 require 的时候再执行

6, loader  【Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。】

//创建style.css文件
echo "background:red;" >style.css
//entry.js 入口文件引入 style.js
require("!style!css!./style.css")
// 安装css-loader
npm install css-loader --save-dev
// 安装style-loader 【用css-loader解析css  然后用style-loader 加到index.html 中】
npm install style-loader --save-dev

7，配置文件 【webpack.config.js】

//添加webpack.config.js文件
echo "">webpack.config.js 

创建配置项

var webpack = require('webpack')

module.exports = {
    //入口文件
    entry: './entry.js',
    // 输出文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style!css' }
        ]
    }
}

另外style.css 引入方式

// entry.js
require("./style.css")

执行 webpack

8,  插件

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。

引入方式

var webpack = require('webpack')

module.exports = {
    //入口文件
    entry: './entry.js',
    // 输出文件
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: 'style!css' }
        ]
    },//插件项
    plugins: [
        new webpack.BannerPlugin('This file is created by lpt')
    ]
}

9，开发环境

当然，使用 webpack-dev-server 开发服务是一个更好的选择。

它将在 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/  可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面

// 显示进度
 webpack --progress --colors
//不想没次改动代码都重新编译一次文件  添加监听
webpack --progress --colors --watch

使用webpack-dev-server

// 安装webpack-dev-server
npm install webpack-save-dev
//运行
webpack-dev-server --progress --color
//访问
localhost:8080

使用webpack-dev-server 热更新

webpack-dev-server --inline --hot