webpack.config.js和package.json

webpack是基于node的，所以写法采用commonjs

let path=require('path');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={

　　entry:''相对路径 入口文件

　　output:{打包后文件

　　　　filename:文件名

　　　　path:必须是绝对路径path.resolve('./dist')

　　},

　　module:{各文件类型用的loader

　　　　rules:[

　　　　　　{test:匹配文件类型正则,use:字符串或数组 使用哪些处理器: ,exclude:排除文件的正则},

//先安装在配置，安装时默认是dependencies，加了--save-dev才是devDependencies

　　　　]

　　},

　　plugins:[

　　　　new HtmlWebpackPlugin({//该插件功能是打包js入口文件时，以该html作为模板，将打包后的js插入该模板，将html文件输出到输出目录中

　　　　　　template:''根html文件路径

　　　　　　filename:html文件名

　　　　})

　　],

　　devtool:'cheap-module-source-map',//debug时可以查找到相应js 而不是打包后的js
　　

　　devServer: {
    　　historyApiFallback: true,//允许热更新时 解决history路径的刷新失败
　　}

 　　 }

 

只有chrome高版本才支持es6语法,所以webpack需要预编译js文件成es5语法，安装

babel-core babel-loader babel-preset-es2015 babel-preset-stage-0
解析es6和es7语法

并且在项目中加上.babelrc文件，内容为{

  "presets": ["es2015","stage-0","react"]
}

-----------------------------------------------------------------------

package.json中配置项目启动,
start项运行时可以省略run,
dev执行webpack 是编译打包用于上线，
build执行webpack-dev-server 是启动webpack的服务器，打包后的代码在内存中，不会输出到项目目录，同时具有热更新的功能。

可选配置项：
--content-base //设定webpack-dev-server的director根目录。如果不进行设定的话，默认是在当前目录下。
--quiet: //控制台中不输出打包的信息，开发中一般设置为false，进行 打印，这样查看错误比较方面
--no-info: // 不显示任何信息
--colors: //对信息进行颜色输出
--no-colors: //对信息不进行颜色输出
--compress:  //开启gzip压缩
--host <hostname/ip>: //设置ip
--port <number>: //设置端口号，默认是:8080
--inline: //webpack-dev-server会在你的webpack.config.js的入口配置文件中再添加一个入口,
--hot: //开发热替换
--open: //启动命令，自动打开浏览器
--history-api-fallback: //查看历史url
--config 新的配置文件名 //使用新的配置文件打包

------------------------------------------------------------------------------------------------------------------------------

 

附源码：

let path=require('path');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve('./dist')
    },
    module:{
        rules:[
            {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
            {test:/\.vue$/,use:'vue-loader'},
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.(svg|eot|woff2|ttf|woff|png|gif|jpg)/,use:'url-loader'},
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html'
        })
    ]
}

{
  "name": "vue-load",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server --open",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "html-webpack-plugin": "^2.30.1",
    "less": "^3.0.0-alpha.3",
    "less-loader": "^4.0.5",
    "style-loader": "^0.19.0",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.3.0",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  }
}

 

较全面的安装包：

## 后端依赖的模块
```
npm install body-parser connect-mongo ejs express express-session mongoose -S(--save的缩写)
```
## react前端依赖的模块
```
npm install react react-dom react-redux redux redux-thunk redux-promise redux-logger react-router-dom react-router-redux history

选装:react-transition-group动画 react-swipe swipe-js-iso 轮播图 es6-promise whatwg-fetch -S ``` 

## 开发依赖模块 ``` npm install babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 file-loader url-loader less less-loader css-loader style-loader webpack webpack-dev-server html-webpack-plugin -D ```

(--save-dev的缩写)

(url-loader用于处理图片 需要依赖file-loader)

 

转载于:https://www.cnblogs.com/serina/p/7723477.html