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",
    },
    resolve:{
        extensions:['.js','.jsx']
    },
    devServer: {
        inline: true,
        port: 8081
    },
    module: {
        rules: [
            //less loader
            {
                test: /\.css$/, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader']
            },
            {
                test: /\.less$/, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader', 'less-loader']
            },
            { 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                loader: "babel-loader", 
                query:
                  {
                    presets:['es2015','react'],
                    plugins: [
                        ["import", {libraryName: "antd-mobile", style: "css"}]
                    ]
                  },
            },
            {
                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}}'
                ]
            },
            {
                test: /\.json/,
                loader: 'json-loader'
            },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            cache:false,
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.UglifyJsPlugin({
          output: {
            comments: false,
          },
          compress: {
            warnings: false
          }
        }),
    ],
    // devServer: {
    //     historyApiFallback: true,
    //     hot: true,
    //     inline: true,
    //     stats: { colors: true },
    //     proxy: {
    //         '/': {
    //           target: 'http://tapi.jiuniok.com/daxiang-web',
    //           pathRewrite: {'^/column' : '/column'},
    //           changeOrigin: true
    //         }
    //      }
    // },
}

如果要发布到生产环境

修改配置文件

var path = require('path'),
    webpack = require('webpack'),
    HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
    entry: {
        main: "./index.js",
        //第三方依赖打包
        vendor: [
          'react', 
          'react-dom', 
          'react-redux', 
          'react-router', 
          'redux', 
          'es6-promise'
        ]
    },
    output: {  
        path: path.resolve(__dirname, "product"),  
        filename: "js/[name].[chunkhash].js",
    },
    resolve:{
        extensions:['.js','.jsx']
    },
    devtool: 'sourcemap',  
    module: {
        rules: [
            //less loader
            {
                test: /\.css$/, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader']
            },
            {
                test: /\.less$/, loaders: ['style-loader', 'css-loader', 'autoprefixer-loader', 'less-loader']
            },
            { 
                test: /\.(js|jsx)$/, 
                exclude: /node_modules/, 
                loader: "babel-loader", 
                query:
                  {
                    presets:['es2015','react'],
                    plugins: [
                        ["import", {libraryName: "antd-mobile", style: "css"}]
                    ]
                  }
            },
            {
                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}}'
                ]
            }
        ]
    },
    plugins: [  
        new HtmlWebpackPlugin({  
            template: './index.html',  
            cache:true,
        }),
        new webpack.HotModuleReplacementPlugin(),  
        new webpack.optimize.UglifyJsPlugin({  
          output: {  
            comments: false,  
          },  
          compress: {  
            warnings: false  
          }  
        }),
        new webpack.DefinePlugin({
          "process.env":{
            NODE_ENV:JSON.stringify('production')
           }
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name:'vendor', // 注意不要.js后缀  
            filename: "js/[name].[hash:8].js"
        }),  
    ]
}

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

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

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