安装配置步骤:

1. 装好node和npm

2. 全局安装webpack

npm install -g webpack

3. 建立项目,进入项目根目录

  • a. 新建一个package.json的文件在项目根目录下
    npm init
  • b. 添加webpack.config.js配置文件
  • c. 添加app文件夹,内含2个js文件
    sub.js
//我们这里使用CommonJS的风格
function generateText() {   var element = document.createElement('h2');   element.innerHTML = "Hello h2 world";   return element; } module.exports = generateText;

index.js

var sub = require('./sub');
var app = document.createElement('div');
app.innerHTML = '<h1>Hello World</h1>'; app.appendChild(sub()); document.body.appendChild(app);

4. 配置Webpack

  • a. 安装html-webpack-plugin,快速生成HTML
    npm install html-webpack-plugin --save-dev
    可在项目根目录下安装(不加-g,在项目根目录出现node_modules文件夹,内含html-web-pack-plugin及其依赖包),也可全局安装(加-g 必须sudo)

  • b. 写webpack.config.js配置文件中的内容

var path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin'); //定义了一些文件夹的路径 var ROOT_PATH = path.resolve(__dirname); var APP_PATH = path.resolve(ROOT_PATH, 'app'); var BUILD_PATH = path.resolve(ROOT_PATH, 'build'); module.exports = { //项目的文件夹 可以直接用文件夹名称 默认会找index.js 也可以确定是哪个文件名字 entry: APP_PATH, //输出的文件名 合并以后的js会命名为bundle.js output: { path: BUILD_PATH, filename: 'bundle.js'//将app文件夹中的两个js文件合并成build目录下的bundle.js文件 }, //添加我们的插件 会自动生成一个html文件 plugins: [ new HtmlwebpackPlugin({ title: 'Hello World app' })//在build目录下自动生成index.html,指定其title ], };

5. 在项目根目录运行webpack

webpack

  • a. Error: Cannot find module 'webpack/../../.....'
    • 解决1:在本项目中安装webpack:
      npm install webpack
    • 解决2:修改环境变量
      • touch ~/.bash_profile
      • vim ~/.bash_profile
      • 修改打开的.bash_profile文件:
      export NODE_PATH="/usr/local/lib/node_modules"
      • 使修改生效 
        source ~/.bash_profile
  • b. 若命令为webpack --watch,动态监听文件的改变并实时打包,输出新bundle.js文件;但不能做到hot replace,即每次webpack编译之后,还需手动刷新浏览器

6. 配置webpack-dev-server:

      --inline 热替换。 --hot 热加载 --progress 包进度  --config

     (默认是根据webpack.config.js打包文件,通过--config xxxx.js修改),这种打包得到的文件

  • a. webpack-dev-server简介:
    • 是一个小型node.js express服务器
    • 新建一个开发服务器,可以serve我们pack以后的代码,并且当代码更新的时候自动刷新浏览器
    • 启动webpack-dev-server后,你在目标文件夹中是看不到编译后的文件的,实时编译后的文件都保存到了内存当中。
    • 两种自动刷新方式:
      • iframe mode
        在网页中嵌入了一个 iframe ,将我们自己的应用注入到这个 iframe 当中去,因此每次你修改的文件后,都是这个 iframe 进行了 reload
        命令行:webpack-dev-server,无需--inline
        浏览器访问:http://localhost:8080/webpack-dev-server/index.html
      • inline mode
        命令行:webpack-dev-server --inline
        浏览器访问:http://localhost:8080
  • b. 安装webpack-dev-server
    npm install webpack-dev-server --save-dev
    可在项目根目录下安装(不加-g,在项目根目录出现node_modules文件夹,内含webpack-dev-server及其依赖包),也可全局安装(加-g 必须sudo)

  • c. 在webpack.config.js中添加配置
var webpack=require('webpack');
module.exports = { ……  devServer: {  historyApiFallback: true,  inline: true,//注意:不写hot: true,否则浏览器无法自动更新;也不要写colors:true,progress:true等,webpack2.x已不支持这些 },  plugins:[ …… new webpack.HotModuleReplacementPlugin() ] …… };
  • d. 在package.json里配置运行的命令(npm支持自定义一些命令)
"scripts":
{
  "start": "webpack-dev-server --inline"//注意:不写--hot,否则浏览器无法自动更新
},
    • e. 运行server
      • npm start
        • Error: .........(此处省略一堆错误)
        • 解决:在本项目中安装webpack:(不加-g,在项目根目录出现node_modules文件夹,内含webpack及其依赖包)
          npm install webpack
      • 浏览器打开http://localhost:8080/
        成功运行,且修改app中的js代码,浏览器会自动刷新!成功!
08-30 03:41