webpack模块化打包css\less\图片

模块化打包css\less

1、安装css-loader,和style-loader(css-loader是将css文件打包。style-loader是将打包好的css文件渲染出来)

具体打包方法参照：webpack中文文档样式页面

安装：

 
npm install style-loader --save-dev
npm install --save-dev css-loader
//需要安装less插件，将less文件解析成css文件
npm install --save-dev less-loader less

2、在webpack.config.js中配置

module.exports= {
        //打包执行从main.js进入
    entry: "./src/main.js",
    //输出路径，当输出有链接时候，默认吧publicPath拼接到连接前
    output: {
            //根据动态路径
        path: path.resolve(__dirname, 'dist'),
        //输出的文件名
        filename: "bundle.js",
        publicPath: "dist/"
    },
    module: {
        rules: \[
                //配置css-loader
            {
                test: /\\.css$/,
                //此配置默认从右往左加载文件，即css-loader -->style-loader 顺序不能错
                use: \['style-loader', 'css-loader'\]
            },
             //配置less-loader
            {
                test: /\\.less$/,
                 //可以写成对象形式，此配置默认从右往左加载文件，
                 //即less-loader-->css-loader -->style-loader 顺序不能错
                 //less文件为css的升级版
                use: \[{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }\]
            },
                   \]
    },
    plugins: \[new VueLoaderPlugin()\],
    resolve: {
        //导入的文件去掉后缀
        extensions:\['.css','.js','.vue'\],
        //项目导入vue的时候默认去找这个文件路径的vue
        alias: {
            'vue$': "vue/dist/vue.esm.js"
        }
    },
}

3、在main.js中加载css，否则在打包main.js的时候，没有css是不会打包的

require("./css/normal.css")
require("./css/special.less");

4、执行打包

打包图片

1、安装插件

//像css文件中有url() 连接使用url-loader
npm install --save-dev url-loader
//大文件可用file-loader

2、webpack.config.js配置

const path=require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports= {
    entry: "./src/main.js",
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
        publicPath: "dist/"
    },
    module: {
        rules: \[
            {
                test: /\\.css$/,
                use: \['style-loader', 'css-loader'\]
            },
            {
                test: /\\.less$/,
                use: \[{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }\]
            },
            //这是配置图片的，
            {
                test: /\\.(png|jpg|gif|jpeg)$/,
                use: \[
                    {
                        loader: 'url-loader',
                        options: {
                            //限制图片的大小单位为字节，如果在限制以内，将图片转化成字符串输出
                            limit: 1400,
                            //超过设置的大小，可设置打包后的路径和名字img/图片名.自动生成的8位hash值.扩展名
                            name: 'img/\[name\].\[hash:8\].\[ext\]'
                        },
                    }
                \]
            },
            {
                test: /\\.js$/,
                exclude: /(node\_modules|bower\_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: \['es2015'\]
                    }
                }
            },
            {
                test: /\\.vue$/,
                use: \['vue-loader'\]
            }
        \]
    },
    plugins: \[new VueLoaderPlugin()\],
    resolve: {
        //导入的文件去掉后缀
        extensions:\['.css','.js','.vue'\],
        //项目导入vue的时候默认去找这个文件路径的vue
        alias: {
            'vue$': "vue/dist/vue.esm.js"
        }
    },
}

3、main.js引入

require("./css/special.css");

4、执行打包 npm run build