-
處理less文件中引入postcss-loader順序， less> postcss>css>style查看全部
-
當要把所有@import引入的css文件也進行postcss-loader處理時，需要加上importLoaders=1， 這個因為loader僅僅為postcss-loader所以為1查看全部
-
postcss可以放在module之后表示postcss需要引入的依賴查看全部
-
webpack的三種用法 1.直接命令行使用。 2.node.js API的使用方式。 3.webpack —config webpack.config.js 一、entry 1、三種輸入方式 （1）string，輸入字符串 entry:{ main:'./src/script/main.js' }, （2）array, 數組。適用情況：兩個平行的，不相依賴的文件打包在一起。 entry:{ main:['./src/script/main.js','./src/script/a.js'] }, （3）object, 適用情況：多頁面應用程序。這里要和output里的[name]占位符配合使用，威力才能最大。如果你要打包成多個js文件，那么entry對象里的key叫做chunk就是文件名，里面的值就是需要打包的文件里面包含的文件。 entry:{ main:'./src/script/main.js', a:'./src/script/a.js' }, 二、output 1、占位符有3種：[name]、[hash]、[chunkhash] 2、output的filename （1）hash: 這次打包的hash 每次終端運行webpack命令，都會生成一段信息，這段信息的第一行就有一個hash （2）chunkhash:每一個chunk自己的hash 3、output的path，//這里配置的是輸出的文件地址查看全部
-
output中可以設置線上文件的文件名查看全部
-
引入公用的js，在body中引入自己的js文件查看全部
-
獲取到不帶publicPath的文件名稱.source()可以獲取到js的實際內容查看全部
-
一 配置文件 ① 配置文件是默認的文件名（webpack.config.js） 1. 在文件的根目錄下創建webpack.config.js文件 2. 配置參數 var path = require('path'); module.exports = { entry:'./src/script/main.js',//打包的入口 output:{ path: path.resolve(__dirname, 'dist/js'),//打包后的存放路徑 （絕對路徑） filename:'bundle.js'//打包后的文件名 } } 3. 在命令行 中運行：webpack ② 配置文件不是默認的文件名 1. 比如配置文件的文件名為webpack.dev.config.js 2. 在命令行中運行時：webpack --config webpack.dev.config.js 二 設置webpack參數 1. 在npm腳本文件package.json文件中設置 2. 在scripts中添加："webpack":"webpack --config webpack.config.js --progress --display-modules --colors --display-reasons"查看全部
-
一、webpack 1、安裝: （1）進入指定目錄 （2）新建文件夾：終端輸入：mkdir webpack-test （3）進入文件夾：終端輸入：cd webpack-test （4）文件夾下初始化npm：終端輸入：npm init （5）全局裝webpack:終端輸入：npm install webpack -g （注：第一次運行webpack項目時，如果沒有這一步，而直接執行下一步的話，會提示錯誤：webpack: command not found） （6）文件夾中裝webpack:終端輸入：npm install webpack --save-dev (參數-g的含義是代表安裝到全局環境里面，參數--save-dev的含義是代表把你的安裝包信息寫入package.json文件的devDependencies字段中。) 2、項目操作 （1）用編輯器打開當前目錄：終端輸入：atom ./ （視頻中老師用的編輯器是atom） （2）編輯器中：新建一個目錄，命名為hello.js （3）webpack打包：終端輸入：webpack hello.js hello.bundle.js（前面是要打包的文件名字，后面是打包后的文件名字） asset這次打包生成的文件，chunks這次打包的分塊，chunk Names這次打包的塊名稱。 3、webpack支持的三種模塊化方式：md，commonJs, es6. require(‘.world.js’)的寫法是commonJs的 4、webpack天生不支持css類型的文件，如果要處理這種文件，就要依賴Loader. 5、安裝loader （1）終端項目目錄輸入：npm install css-loader style-loader --save-dev （2）require('style-loader!css-loader!./style.css');表示引用文件之前，要引入loader查看全部
-
多頁面應用 自動生成html查看全部
-
webpack.config.js配置文件查看全部
-
這一章沒什么卵用查看全部
-
本章節主要內容： 流程： 1.初始化，自動創建package.json npm init 2、在本項目中安裝Webpack作為依賴包 npm install webpack --save-dev 3、打包，打包js為自定義的hello.js(js文件自定義，2-3步驟之間需要自己寫頁面邏輯)，自動會生成一個hello.bundle.js文件 webpack hello.js hello.bundle.js 4、html頁面引入hello.bundle.js 中間要點： 1、其他js文件處理 hell.js里require("./xx.js") 2、css文件處理 a、需要先命令行安裝css的loader npm install css-loader style-loader --save-dev b、在hello.js里require("style-loader!css-loader!./style.css") 3、避免在require css大量指定loader，直接通過命令行來指定相應的loader webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" 4、避免每次輸入打包等命令行，直接通過命名行來監聽變動并自動打包 webpack hello.js hello.bundle.js --module-bind "css=style-loader!css-loader" --watch 備注：webpack hello.js hello.bundle.js --watch 此命令沒指定css loader，需require的時候指定 其他命令行 1、查看打包的模塊 webpack hello.js hello.bundle.js --display-moudles //查看打包的模塊 2、查看打包的進度 webpack hello.js hello.bundle.js --progress 3、命令行里終止該次命令 ctrl+c查看全部
-
mkdir webpack-test cd webpack-test npm init npm install webpack webpack hello.js hello.bundle.js查看全部
舉報
0/150
提交
取消