加入静态资源

在webpack.config.js中module.rules添加如下代码：

{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ]
},
{
    test:/\.(gif|jpg|jpeg|png|svg)$/,
    use:[
        {
            loader: 'url-loader',
            options: {
                limit: 1024,
                name: '[name].[ext]'
            }
        }
    ]
}

上面的代码可以看到，其实我们是添加了对css文件和一些图片的处理。但是语法相较于vue-loader时有所区别，主要如下：

test后面的.前面多了个斜杠，这是因为正则表达式中的.是要转义的，上次之所以是对的，是因为不转义的表达式也正确完成了匹配，我们这次也只是修正而已。
在css-loader中，loader属性变成了use一个数组，这里是添加多个loader的语法。为什么要添加多个loader呢？因为css-loader其实只是帮助我们解析了css文件，而style-loader可以帮助我们将样式转化文页面的style。
下面的url-loader又不一样了，这是配置了loader的属性的语法。url-loader会将静态文件解析成js文件，option里的意思是1024大小以内的解析成base64代码，剩下的不生成，仅输出文件，后面的name是对文件名字的配置，实际上就是原名（name是文件名，ext是扩展名）。该loader依赖于file-loader

npm i style-loader url-loader file-loader

接下来我们在src下面新建assets/images文件夹，我放了个head.jpg图片进去。再新建文件assets/styles/test.css，内容是：

body{
    color: red;
	background-image: url('../images/head.jpg')
}

这里背景图片的引用就是由url-loader帮我们处理的。
　　在index.js中添加：

import './assets/styles/test.css'
import './assets/images/head.jpg'

然后执行：

npm run build

css预处理器

在rules中添加如下代码：

{
    test: /\.styl$/,
    use:[
        'style-loader',
        'css-loader',
        'stylus-loader'
    ]
}

安装完对应的loader我们看，它似乎就是比css-loader多了一个stylus-loader。这里的loader似乎是有顺序的，是由下面的处理完了抛给上面的处理。这里就是先将styl文件处理成css文件再处理成style标签。然后：import ‘./assets/styles/test-stylus.styl’，然后build，成功。test-stylus.styl内容如下：

body
    font-size 20px

调试

这里我们是使用webpack-dev-server。首先要安装：npm i webpack-dev-server。然后，我们在package.json文件的scripts节添加：

"dev": "webpack-dev-server --config webpack.config.js"

在webpack.config.js中module.exports中添加与entry平行的节点：

target: 'web'

因为目标是web平台。
　　然后，因为在开发环境的调试我们使用的是webpack-dev-server，正式环境的打包是不是用它的。所以，我们需要区分相关的环境，我们使用cross-env插件来统一添加环境变量，去掉不通系统中的语法差异。这个插件也是需要用npm安装的。这是我们的dev和build脚本变为如下：

    "build": "cross-env NODE_EVN=prod webpack --config webpack.config.js",
    "dev": "cross-env NODE_EVN=dev webpack-dev-server --config webpack.config.js"

同时，我们的webpack.config.js也做出了相关的变动，由于整体变动不少，我给出完整文件如下：

const path=require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const HTMLPlugin=require('html-webpack-plugin')
const webpack=require('webpack')

//根据环境变量判断是否是开发环境
const isDev= process.env.NODE_ENV==='dev'

const config={
    target: 'web',
    entry: path.join(__dirname,'src/index.js'),
    output:{
        filename:'boundle.js',
        path: path.join(__dirname,"dist")
    },
    module:{
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.styl$/,
                use:[
                    'style-loader',
                    'css-loader',
                    'stylus-loader'
                ]
            },
            {
                test:/\.(gif|jpg|jpeg|png|svg)$/,
                use:[
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 1024,
                            name: '[name].[ext]'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new VueLoaderPlugin(),
        new HTMLPlugin(),
        new webpack.DefinePlugin({
            'process.env':{
                NODE_ENV: isDev?'"dev"': '"prod"'
            }
        })
    ]
}

//如果是开发环境，则添加关于webpack-dev-server的相关配置
if(isDev){
    config.devServer={
        port: '8000',
        host: '0.0.0.0',
        overlay:{
            errors: true, //如果出错则显示在网页上
        }
    }
}

module.exports=config;

需要注意的是html-webpack-plugin这个插件。因为我们到现在为止只有js，剩下的什么都没有，但是，作为网页，总是需要html的，所以我们使用这个插件来提供这个容器。这时，执行npm run dev，就启动server了，然后就可以访问127.0.0.1:8000看我们的网站了。

vue学习——webpack项目搭建（二）

加入静态资源

css预处理器

调试

更多配置

热部署

方便调试

猜你喜欢