-
--progress -dispaly-modules //列出打包模塊查看全部
-
--progress //查看打包過程查看全部
-
--watch //文件更新時自動打包查看全部
-
webpack hello.js hello.bundle.js --module-bind 'css=style-loader!css-loader' //綁定css的loader查看全部
-
webpack -g //查看webpack命令查看全部
-
npm install css-loader style-loader -save-dev //下載用于適配css文件的loader查看全部
-
npm install webpack --save-dev //下載webpack查看全部
-
npm init // 在項目中引導創建一個package.json文件 安裝包的信息可保持到項目的package.json文件中，以便后續的其它的項目開發或者他人合作使用，也說package.json在項目中是必不可少的。查看全部
-
mkdir //新建文件夾查看全部
-
var htmlWebpackPlugin = require('html-webpack-plugin') var path = require('path') module.exports = { entry: { main: './src/app.js' }, output: { path: path.resolve(__dirname + "/dist"), filename: 'js/[name].bundle.js', }, module: { rules: [{ test: /\.css$/, use: ["style-loader", "css-loader", "postcss-loader"] }, { test: /\.less$/, use: ["style-loader", "css-loader", "postcss-loader", "less-loader"] }, { test: /\.js$/, include: path.resolve(__dirname, 'src'), exclude: path.resolve(__dirname, 'node_modules') }] }, plugins: [ new htmlWebpackPlugin({ template: 'index.html', filename: 'index.html', inject: 'body', }), require('autoprefixer') ] } http://www.xianlaiwan.cn/qadetail/212602查看全部
-
一、layer.html是模板文件 1、處理模板文件的做法：（1）webpack將模板文件當做一個字符串進行處理。（2）webpack將模板文件當成已經編譯好的的模板的處理函數。 對js模板語法，模板引擎，模板的作用的認識和了解再來看這章會比較容易理解。 二、要支持html文件，安裝html-loader 終端目標文件輸入：npm install html-loader --save-dev 三、要支持.ejs文件或者是.tpl文件，安裝ejs 終端目標文件輸入：npm install ejs-loader --save-dev layer.js載入ejs模板時，返回的是一個function，這時的import tpl from './layer.tpl';中的tpl代表的不再是字符串，表示的是一個已經編譯過的函數 四、react——jsx vue——jsx查看全部
-
一、less-loader 1、安裝： 終端目標文件輸入：npm i less-loader --save-dev 錯誤提示：npm WARN [email protected] requires a peer of less@^2.3.1 but none was installed. 說明less沒有裝 2、安裝less 終端目標文件輸入：npm i less --save-dev 二、less-loader 基本配置是 loader: ‘style-lander!css-loader!postcss-loader!less-loader’ 三、sass-loader 1、安裝 終端目標文件輸入：npm i sass-loader --save-dev 出現錯誤提示： npm WARN [email protected] requires a peer of node-sass@^4.0.0 but none was installed. 說明需要安裝node-sass，解決方法： 終端目標文件輸入：npm i node-sass -g --save-dev查看全部
-
//webpack2.0 解決style-loader!css-loader!post-loader問題,并解決css中@import的問題： { test:/\.css$/, use:[ 'style-loader', {loader:'css-loader',options:{importLoaders:1}}, { loader:'postcss-loader', options:{ plugins:function(){ return [ require('postcss-import')(), //一定要寫在require("autoprefixer")前面，否則require("autoprefixer")無效 require("autoprefixer")({browsers:['last 5 versions']}) ] } } } ] }查看全部
-
2.5.1官網最新文檔總結： 1.安裝方法 npm install babel-loader babel-core babel-preset-env webpack --save-dev 2.所以后面的參數'由presets: ['latest']相對于的變成了presets: ['env'] 3.官方并沒有廢棄query 也沒有指明options是新參數 實際測試兩種方法都可以 生成結果也一模一樣 4.loader: 'babel-loader'才能被識別 5.include和exclude需要相對路徑，所以include:__dirname +'./src/' 加前綴__dirname查看全部
-
一、babel 1、babel是一個轉換編譯器,它能將ES6轉換成可以在瀏覽器中運行的代碼 2、安裝babel 終端目標文件夾輸入：npm install --save-dev babel-loader babel-core 3、loader:'babel-loader'可以正常運行，視頻中的loader:'babel'不能正常運行。 4、babel的loader是一個非常耗時的轉換。 改善之前的時間是8260ms 二、query: ['kw??r?]查詢 presets:[pri?'sets] 三、安裝plugin的latest 終端目標文件輸入：npm install --save-dev babel-preset-latest 四、改善： （1）webpack 的api的configuration loaders的參數5個：test,exclude,include,loader,loaders （2）改善方法：exclude,include參數 例如：exclude:'./node_modules/',//node_modules是已經引用過的，已經打包過的文件，其實這里對速度沒有影響，這是告訴你如果是不相關的文件，可以用exclude include:'./src/', 1）會報錯：-configuration.module.loaders[0].exclude: The provided value "./node_modules/" is not an absolute path! 2）報錯的解決方法： exclude:__dirname+'/node_modules/',//已經引用過的，已經打包過的文件 include:__dirname+'/src/', （3）這樣初步改善后時間是1210ms 五、給loader指定參數presets 1、直接Loader后跟問號 require('url-loader?mimetype=images/png!./file.png'); 2、配置文件中跟問號 3、配置文件中用query 4、項目根目錄建立babelrc配置文件，配置文件中一個對象，對象中參數為presets. 5、config.js中指定babel，babel指定presets.查看全部
舉報
0/150
提交
取消