webpack项目搭建

一、功能说明

1.热更新

2.支持less,es6,react的jsx转化

3.生产环境开发环境配置

4.chunkhash

5.文件打包压缩、图片压缩

6.自动生成html引入打包后的资源

7.css3浏览器自动兼容

二、创建文件目录
1.新建一个文件夹myReactWebapp

2.cmd进入这个文件夹下init，然后再进行插件安装（第三部分介绍）

3.新建一个index.html和index.js

三、插件下载

这里说明一下 --save-dev和--savede区别：前者是本地需要的依赖，就是在开发过程中需要的依赖，上线时候不用管这些插件，--save则是项目运行在浏览器上需要的依赖。

（注意一下packjson文件里面）

npm i webpack --save-dev

npm i webpack-dev-erver --save-dev  //本地服务

npm i autoprefixer-loader --save-dev   css前缀自动补全插件

npm i babel-core --save-dev 

npm i babel-loader --save-dev 

npm i babel-preset-es2015 --save-dev 

npm i babel-preset-react --save-dev  //这里如果是react项目就下载

npm i css-loader --save-dev 

npm i file-loader --save-dev

npm i html-webpack-plugin --save-dev

npm i image-webpack-loader --save-dev

npm i less --save-dev

npm i less-loader --save-dev

npm i style-loader --save-dev

npm i uglifyjs-webpack-plugin --save-dev //文件压缩

这里我贴出我的package.json文件，可以按照里面的去下载，上述所列举的也已经够了，里面有些可以不需要。

{  "name": "suzhe",  "version": "1.0.0",  "description": "react webapp",  "main": "index.js",  "scripts": { ---------这里配置一些启动命令（npm run build---相当于直接执行webpack）    "build": "webpack",    "dev": "webpack-dev-server --devtool eval --progress --colors --content-base build",    "dist": "webpack --devtool sourcemap --progress --profile --colors --config webpack.production.config.js"  },  "author": "su",  "license": "ISC",  "devDependencies": {---------------------本地依赖的插件    "autoprefixer-loader": "^3.2.0",    "babel-core": "^6.25.0",    "babel-loader": "^7.1.1",    "babel-preset-es2015": "^6.24.1",    "babel-preset-react": "^6.24.1",    "chunk-manifest-webpack-plugin": "^1.1.0",    "css-loader": "^0.28.4",    "file-loader": "^0.11.2",    "html-webpack-plugin": "^2.29.0",    "image-webpack-loader": "^3.3.1",    "jsx-loader": "^0.13.2",    "koa": "^2.3.0",    "koa-body": "^2.3.0",    "koa-router": "^7.2.1",    "less": "^2.7.2",    "less-loader": "^4.0.4",    "style-loader": "^0.18.2",    "uglifyjs-webpack-plugin": "^0.4.6",    "url-loader": "^0.5.9",    "webpack": "^2.2.1",    "webpack-chunk-hash": "^0.4.0",    "webpack-dev-server": "^2.5.0",    "webpack-manifest-plugin": "^1.1.0"  },  "dependencies": {-------------------线上依赖的插件    "es6-promise": "^4.1.1",    "react": "^15.6.1",    "react-dom": "^15.6.1",    "react-redux": "^5.0.5",    "react-router": "^4.1.1",    "redux": "^3.7.1",    "whatwg-fetch": "^2.0.3"  }}

四、webpack配置（webpack.config.js）

var path = require('path'),    webpack = require('webpack'),    HtmlWebpackPlugin = require('html-webpack-plugin');------------引入需要的插件module.exports = {    entry: {        main: "./index.js",    ------这是入口文件    },    output: {        path: path.join(__dirname, "build"), -----------打包之后的出口文件        filename: "bundle.js",    },    devServer: {-----------------------------本地服务  监听8080端口        inline: true,        port: 8080    },    module: {        loaders: [            //less loader            {                test: /\.css$/, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader']            },            {                test: /\.less$/, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader', 'less-loader']            },            { -------------------------------es6  jsx（注意babelrc）                test: /\.js$/,                 exclude: /node_modules/,                 loader: "babel-loader",                 query:                  {                    presets:['es2015','react']                  }            },            {                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,                loaders: [                    'file-loader?limit=25000&name=images/[hash:8].[name].[ext]',-----------------在build文件夹下生成images文件夹存放图片                    'image-webpack-loader?{pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}' ----------------图片压缩                ]            }        ]    },    plugins: [        new HtmlWebpackPlugin({-----------自动生成html打包后并引入相关的资源            template: './index.html',            favicon:'./src/img/1.jpg',            cache:false,        }),        new webpack.HotModuleReplacementPlugin(), ---------------热更新        new webpack.optimize.UglifyJsPlugin({-----------------文件压缩          output: {            comments: false,          },          compress: {            warnings: false          }        })    ]}

如果要发布到生产环境

修改配置文件

var path = require('path'),    webpack = require('webpack'),    HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = {    entry: {        main: "./index.js"    },    output: {        path: path.join(__dirname, "product"),        filename: "[name].[chunkhash].js",----------------增加一个chunkhash  文件缓存    },    module: {        loaders: [            //less loader            {                test: /\.css$/, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader']            },            {                test: /\.less$/, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader', 'less-loader']            },            {                 test: /\.js$/,                 exclude: /node_modules/,                 loader: "babel-loader",                 query:                  {                    presets:['es2015','react']                  }            },            {                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,                loaders: [                    'file-loader?limit=25000&name=images/[hash:8].[name].[ext]',                    'image-webpack-loader?{pngquant:{quality: "65-90", speed: 4}, mozjpeg: {quality: 65}}'                ]            }        ]    },    devtool: 'sourcemap',    plugins: [        new HtmlWebpackPlugin({            template: './index.html',            favicon:'./src/img/1.jpg',            cache:true,----------------设置为true，不知道生不生效没有测出来        }),        new webpack.HotModuleReplacementPlugin(),        new webpack.optimize.UglifyJsPlugin({          output: {            comments: false,          },          compress: {            warnings: false          }        }),        new webpack.optimize.CommonsChunkPlugin({-----------这个作用就是将公共代码提取出来放到commonjs里面            name:'common', // 注意不要.js后缀            filename: "commons.js",            chunks: 'main'        }),    ]}

通过packjson里面script的配置我们可以使用npm命令来进行项目的打包运行

到这里基本上可以实现从项目创建到打包到运行，后续会在这个基础上实现一个react小项目，并补充文件的拆分，css、js、img等，webpack太深，继续学习。

代码地址：https://github.com/wineSu/myReact