Webpack4.0+Vue2.6+iView3.0+Vuex环境搭建(1)上述步骤完成之后，打开控制台，选中某一个标签

搭建

mkdir hello-word
cd hello-word
npm init / cnpm init 初始化为一个node项目

package name不填会将当前的目录作为应用名

npm install webpack --save-dev和npm install webpack-cli --save-dev :安装webpack依赖
npm install webpack-dev-server --save-dev ：可以在开发环境提供很多服务，比如启动一个服务器，热更新，接口代理等;
创建一个webpack.config.js文件,内容如下：

var path = require("path");

var config = {
    entry: {
        main: "./index.js" //指定入口文件,需要与初始化过程中的入口文件一样
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定输出目录
        publicPath: "/dist/",
        filename: "main.js"//输出文件
    }
}
module.exports = config;

- 根目录下创建index.html,文件内容为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <div id="app">Hello world</div>
    <!-- 输出文件 -->
    <script src="/dist/main.js"></script>
</body>
</html>

- 根目录下创建入口js文件（index.js) - 运行：npm run dev

修改package.json内容： "scripts": { "dev": "webpack-dev-server --open --config webpack.config.js", "test": "echo "Error: no test specified" && exit 1" }

在webpack的世界中每一个文件都是一个模块，比如css,js,html,jpeg对于不同的模块我们要使用不同的加载器进行处理；比如：css的加载器

npm install css-loader --save-dev
npm install style-loader --save-dev
在webpack.config.js文件中添加对css的处理

var path = require("path");

var config = {
    entry: {
        main: "./main.js" //指定入口文件
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定输出目录
        publicPath: "/dist/",
        filename: "main.js" //输出文件
    },
    module: {
        rules: [{
            test:/\.css$/,
            use:[
                'style-loader',
                'css-loader'
            ]
        }]
    }
}

以css结尾的文件，首先将.css文件使用css-loader转换，然后通过style-loader转换，然后打包。 use选项可以是数组或者字符串，如果是数组的话，它的编译顺序是从后向前的

创建index.css样式文件，并引入到index.js中 index.css文件内容：

#app {
    font-size: 18px;
    color: red;
}

引入到index.js中

import "./index.css"

document.getElementById("app").innerHTML = "哈哈哈哈";

上述步骤完成之后，打开控制台，选中某一个标签，你会发现样式都直接写在了对应的标签下。

使用webpack的插件功能；这里我们使用extract-text-webpack-plugin插件，将散落在各地的css提取出来，生成一个main.css

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

由于extract-text-webpack-plugin目前不支持webpack4.0+,故此处需要安装extract-text-webpack-plugin@next版本

修改webpack.config.js

//修改配置文件
var path = require("path");
//导出插件
var ExtractTextPlugin=require("extract-text-webpack-plugin");
var config = {
    entry: {
        main: "./index.js" //指定入口文件
    },
    output: {
        path: path.join(__dirname, "./dist"), //指定输出目录
        publicPath: "/dist/",
        filename: "main.js" //输出文件
    },
    module: {
        rules: [{
            test:/\.css$/,
            use:ExtractTextPlugin.extract({
                use:"css-loader",
                fallback:'style-loader'
            })
        }]
    },
    plugins:[
        //将提取后的文件命名为main.css
        new ExtractTextPlugin("main.css")
    ]
}
module.exports = config;

修改index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/dist/index.css">
</head>
<body>

    <div id="app">Hello world</div>
    
    <script src="/dist/main.js"></script>
</body>
</html>

删掉index.js中的css导入