webpack介绍

http://www.cnblogs.com/eyunhua/p/6398885.html

 

1.安装完成nodejs和npm后，用node -v 和npm -v查看是否成功
2.安装webpack npm install webpack -g ，全局安装，不建议使用

这里才是正式的
1.进入项目目录，输入命令：npm init，生成package.json文件
2.输入命令：npm install webpack --save-dev为项目添加webpack依赖

安装完成！！

使用方法 就是打包编译

webpack hello.js hello.bundle.js
===============================================

http://www.cnblogs.com/eyunhua/p/6506278.html

 

使用loader教程

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

1.安装loader转换器来处理css样式

npm install css-loader style-loader --save-dev

备注 css-loader是找css文件的,style-loader是把css加载到document中style标签中的

 

2.在入口文件hello.js加上require('css-loader!./style.css');再执行webpack hello.js hello.bundle.js
接下来查看hello.bundle.js, 就可以看到css被加载到js文件中了

3.把js中的css加载到html中

在项目目录下新建一个index.html，并且引入hello.js打包后的hello.bundle.js

把原来的require('css-loader!./style.css');替换成require('style-loader!css-loader!./style.css');

再打包编译 webpack hello.js hello.bundle.js

 

备注:方便使用loader，每次修改好自动编译

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

并且require()的时候只用写require('./style.css');

 

=================================================

配置webpack.config.js方便使用webpack工具

http://www.cnblogs.com/eyunhua/p/6507100.html

http://blog.csdn.net/zaichuanguanshui/article/details/53610694

https://webpack.js.org/concepts/loaders/

 

==============================================

webpack.config.js

 

var path=require('path');

//在命令行执行webpack --watch 就可以时时监听了
//要先安装npm install style-loader和style-loader
module.exports={
    entry: './src/script/hello.js',
    output:{
        path:path.resolve(__dirname,'./dist/js'),
        filename:'hello.bundle.js'
    },
     module: {
               rules: [
                   {
                    test:/\.css$/,
                    use: [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader'
                        }
                    ]
                   },
                {
                    test:/\.less$/,
                    use: [
                        {
                            loader: 'style-loader'
                        },
                        {
                            loader: 'css-loader'

                        },
                        {
                            loader: 'less-loader'

                        }
                    ]
                }
               ]
        
    }
}

 

 

如何使用less

https://webpack.js.org/loaders/less-loader/

==============================================

 

 

问题1.输出路径要是绝对路径

http://www.imooc.com/qadetail/210600

 

===============================================