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

 

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