webpack

首先安装全局的webpack，因为要使用到webpack的命令；

然后初始化项目的webpack依赖。

使用3.10.0版本

npm init

npm install webpack@3.10.0 -g

npm install webpack@1.15.0 --save-dev

webpack -v

webpack ./src/page/index/index.js ./dist/app.js

webpack ./src/page/index/index.js ./dist/app.js

npm install css-loader style-loader --save-dev

npm install extract-text-webpack-plugin@1.0.1 --save-dev

npm install url-loader@0.5.8 --save-dev

npm install webpack-dev-server@1.16.5 -g

npm install webpack-dev-server@1.16.5 --save-dev

webpack-dev-server

npm install hogan --save

查看webpack版本

npm view webpack versions

 

 

 

 

通过修改webpack.config.js来生成打包内容。

package.json

{
  "name": "mmall-fe",
  "version": "1.0.0",
  "description": "mmall前端代码",
  "main": "index.js",
  "scripts": {
    "dev": "WEBPACK_ENV=dev webpack-dev-server --inline --port 8081",
    "dev_win": "set WEBPACK_ENV=dev && webpack-dev-server --inline --port 8082",
    "dist": "WEBPACK_ENV=online webpack -p",
    "dist_win": "set WEBPACK_ENV=online && webpack -p"
  },
  "author": "Rosen",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "style-loader": "^0.17.0",
    "url-loader": "^0.5.8",
    "webpack": "^1.15.0",
    "webpack-dev-server": "^1.16.5"
  },
  "dependencies": {
    "font-awesome": "^4.7.0",
    "hogan": "^1.0.2"
  }
}

 

 

线上打包方式：

npm run dist

线上css，js路径配置：

output: {
        path: __dirname + '/dist/',
        publicPath : 'dev' === WEBPACK_ENV ? '/dist/' : '//s.abc.cn',
        filename: 'js/[name].js'
    },