webpack搭建开发环境

搭建开发环境分成以下几块

• 初始化npm环境
• 安装webpack
• 安装webpack-dev-serve
• 安装babel

下面开始详细介绍：

首先保证电脑要安装nodejs，可以从官网下载，查看node版本

一、初始化npm环境

新建一个空的文件夹（我的是design），接下来执行命令npm init,然后一直回车就可以了，在文件中就可以看到package.json文件夹了

二、安装webpack

1）输入命令行 （安装完成后注意版本号，版本号不对应可能会报错）

npm install webpack webpack-cli --save-dev

2）、在根目录里新建文件夹src,在src下面新建index.js文件（随便输点内容，一会儿测试用）；

在根目录下新建webpack.dev.config.js文件

3）、在webpack.dev.config.js里输入以下内容

module.exports = {
    entry: './src/index.js',      //入口文件
    output: {                     //出口文件
        path: __dirname,
        filename: './release/bundle.js'
    }
}

4）、修改package.json文件中的内容

在scripts里面加上

 "dev": "webpack --config ./webpack.dev.config.js --mode development"

到这里上面的第二大步webpack就算安装完成了，执行npm run dev文件中会有release文件生成。

三、安装webpack-dev-serve

1)、在命令行中输入

npm install webpack-dev-server html-webpack-plugin --save-dev

2）、在跟文件下新建index.html文件，在里面输入h5内容

3）、修改webpack.dev.config.js文件，修改如下图所示

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        path: __dirname,
        filename: './release/bundle.js'
    },

    plugins: [                       //模板
        new HtmlWebpackPlugin({
            template: './index.html'
        })
    ],
    devServer: {
        contentBase: path.join(__dirname, './release'), //根目录
        open: true, //自动打开浏览器
        port: 9000 //端口
    }
}

4）修改package.json文件里的dev,将webpack修改为webpack-dev-server

 "dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development"

到这里第三步就搭建好了，执行npm run dev看效果

四、安装babel

主要目的是解析es6

1)安装插件

 npm install babel-core babel-loader babel-polyfill babel-preset-es2015 babel-preset-latest --save-dev

2）在根目录下新建.babelrc文件

在文件中写

{
    "presets": ["es2015","latest"],
    "plugins": []
}

3）修改webpack.dev.config.js文件，在文件中加入

module: {
        rules: [{
            test: /\.js?$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader'
        }]
    },

到这里以上环境就完全开发好了，想要编写的东西在index.js里面就可以写了。

完整版的见https://github.com/DFairy/design