webpack 小demo

1 安装node.js

2 安装cnpm

3 安装webpack

cnpm install --save-dev webpack

对于大多数项目，我们建议本地安装。这可以使我们在引入破坏式变更的依赖时，更容易分别升级项目。

安装最新版本的webpack

cnpm install --save-dev webpack@<version>

全局安装

cnpm install --global webpack

4 初始化npm 生成package.json文件

cnpm init

5 设置配置文件webpack.config.js （import 和module.exports不能同时使用 import 可以和exports一起使用 module.exports和require一起使用）

var path = require('path');//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
module.exports={
    devtool:'eval-source-map',
    entry:APP_PATH,
    output:{
        path:BUILD_PATH,
        filename:'main.js'
    }
}

项目目录：

 webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
　　|-main.js
  |- /src
    |- index.js
　　|- tool.js

6 定义方法 tool.js

var $=require('jquery'); (安装jquery插件 cnpm install --save-dev jquery)

function demo1(){

　　console.log('this is function demo1');

}

function demo2(){

　　console.log('this is function demo2');

}

function demo3(){

　　console.log($('body'));

}

module.exports={

　　demo1:demo1,

　　demo2:demo2

}

6 引入tool.js中的方法 index.js

var demo=require('./tool.js');

demo.demo1();
demo.demo2();
demo.demo3();

7 index.html

<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>

8 执行构建

8.1 如果没有设置配置文件webpack.config.js需要根据文件的目录自己设置编译的文件以及生成文件 webpack src/index.js dist/bundle.js

8.2 设置了配置文件webpack.config.js 只需要执行webpack就可以了;这条命令会自动引用webpack.config.js文件中的配置选项

运行结果：

8.3 更便捷的执行打包任务

在命令行中输入命令需要代码类似于 node_modules/.bin/webpack 这样的路径其实是很烦人的，不过值得庆幸的是npm可以引导任务执行，对npm进行进行配置后可以在命令行中使用简单的npm start命令来替代尚明略微繁琐的命令。在pachage.json中对scripts队形进行相关设置即可，设置方法如下：

"scripts": {
    "start": "webpack" // 修改的是这里，JSON文件不支持注释，引用时请清除
  },
(试了一下webpack需要全局安装才可以)

Webpack的强大功能
生成Sourse Maps（使调试更容易）
devtool:'eval-source-map'//在module.exports中设置


使用webpack构建本地服务器
Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要
单独安装它作为项目依赖
cnpm install --save-dev webpack-dev-sever

实际操作中需要全局安装webpack-dev-server 才可以

修改webpack.config.js,在module.exports中添加配置：

plugins:[

　　new webapck.HotModuleReplacementPlugin()

devServer:{

　　contentBase:'./dist',

　　historyApiFallback:true,

　　inline:true　　

}

最终webpack.config.js的配置如下：

var path = require('path');
var webpack=require('webpack');
var HtmlwebpackPlugin = require('html-webpack-plugin');
//定义了一些文件夹的路径
var ROOT_PATH = path.resolve(__dirname);
var APP_PATH = path.resolve(ROOT_PATH, 'src');
var BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
module.exports={
    devtool:'eval-source-map',
    entry:APP_PATH,
    output:{
        path:BUILD_PATH,
        filename:'main.js'
    },
    plugins: [
        /*new HtmlwebpackPlugin({
            title: 'Hello World app'
        }),*///在build目录下自动生成index.html，指定其title
        new webpack.HotModuleReplacementPlugin()
    ],
    devServer:{
        contentBase:'./dist',
        historyApiFallback: true,
        inline: true
    }
}


在终端输入：webpack-dev-server 构建本地服务器并执行热加载

配置script，修改package.json文件

"scripts":{

　　...
　　"server":"webpack-dev-server -inline"
}
在终端执行npm run server 就可以了、

如果局部安装webpack 和webpack-dev-server
在终端输入的命令分别是：
node_modules/.bin/webpack
node_modules/.bin/webpack-dev-server
配置script：修改package.json文件
"scripts":{
　　...
　　"start":"node_modules/.bin/webpack",

　　"server":"node_modules/.bin/webpack-dev-server --inline"