require("style-loader!css-loader!./style.css")

引用这个文件之前必须进过css-loader的处理

webpack hello.js  -o hello.bundle.js --module-bind ‘csss=style-loader!css-loader’第二种方式

--watch 自动打包

--progress 打包过程

--display-nodules 打包的模块

--display-reasons 打包这个模块的原因

初始化 npm init

安装webpack  ： npm install webpack --save-dev

压缩，删除注视，空格

html-webpack-plugin

npmjs.com查询官网，查看详细注释

hash是相同的，chunkhash文件名hash值各不相同，并且下次打包只更改修改过的文件的hash

webpack.config.js

module.exports = {

    entry : '  ./src/script/main.js ',

    output: {  

        path: ' ./dist/js',

        filename: 'bundle.js'          

    }

 }

webpack --config  其他的配置文件 

可在package.json scripts:{}里配置简洁写法

require('style-loader!css-loader!./style.css')

webpack hello.js hello.handle.js //命令行中直接引用打包

webpack hello.js hello.handle.js --module-bind 'css=style-loader!css-loader'

新版本已经不支持loaders了

babel-loader@7版本

npm install --save-dev babel-loader@7

module:{
    rules:[
        {
            test:'/\.js$/,
            use:{
                loader:'babel-loader',
                options:{
                    "presets":['latest']
                }
            }
        }
    ]
}

打包提示 configuration.output.path: the provided value "./dist/js" is not an absolute path!

the output directory as **absolute path ** (required)

解决

const path = require('path')

module.exports = {

        entry:'./src/script/main.js,

        output:{

                path:path.resolve(__dirname,'./dist/js'),

                filename:'bundle.js'

          }

}

4.x版本以上的webpack在输入打包命令时，webpack hello.js hello.bundel.js是报错的，应用新的命令

webpack hello.js -o hello.bundel.js

1.webpack命令

2. js中直接用loader

3.webpack命令中指定loader

4. webpack其他参数，如--watch 每次更改内容，自动打包

使用webpack@3.x的配置如下：

const config ={}

 config.module.rules.push({

/\.(gif|jpg|jpeg|png|svg)$/i,

use: [

{

loader: 'url-loader',

options: {

limit: 2000,

name: '[name].[ext]'

}

},

{

loader: 'image-webpack-loader',

options: {

// bypassOnDebug:true,//webpack@1.x

disable: true

}

}

]

})

问题：安装image-webpack-loader成功，为何压缩图片不成功？

babel

css 需要importLoader less中已经默认处理过了.

当ertry是多个的时候，output设置不能写死filename，需要使用name  or hash  or chunkhase等占位符来配置filename，以免导致信息覆盖

如果使用hash每次构建完成后，输入的filename都不一样了，这个时候需要动态的配置index.html里面的js文件引入，这是就需要用到一个给力的plugin  及是：html-webpack-plugin

关于sass以及less不用添加importLoaders参数个人理解是less-loader将其处理编译成了一个单文件css(包括import部分的less),而直接导入css的并没被处理成单文件css。